• 0

CSS Irregular Gradient Background


Question

Hello gang,

 

I am in need to create a background that has this sort of irregular gradient background.  I don't even know what specifically to call this.   I am talking about how the colors fade into each other but not in a standard linear gradient.

 

Thanks.

post-45653-0-29840900-1400016138.jpg

Link to comment
https://www.neowin.net/forum/topic/1213413-css-irregular-gradient-background/
Share on other sites

8 answers to this question

Recommended Posts

  • 0
  On 13/05/2014 at 22:11, Seahorsepip said:

Hmm thats a interesting request. It can be done with multiple css gradients and background positions.

I'll give it a try later today.

For what do you need it? A website background?

 

Correct, this is going to be a website's background.

 

It's VERY kind of you to attempt to DO this, I am only asking for the name of this look. 

  • 0
  On 13/05/2014 at 23:12, jamesyfx said:

I don't think it has a name as such, I'd say the example has just a fixed resolution image. But it looks mostly like Bokeh.. because of the circles and the blur.

 

Oh it is definitely a fixed image (template I found that my client likes)  I will look into Bokeh, that looks promising.

 

Have a great day

  • 0

You could do this with a mix of SVG and gradients, but I'd recommend against it. Even though browsers have greatly improved speed wise in recent years, something like that is still too complicated.

A high res raster background with something like background-size: cover; would fit the bill and perform better.

  • Like 2
  • 0
  On 14/05/2014 at 12:52, The_Decryptor said:

You could do this with a mix of SVG and gradients, but I'd recommend against it. Even though browsers have greatly improved speed wise in recent years, something like that is still too complicated.

A high res raster background with something like background-size: cover; would fit the bill and perform better.

I agree, might be a fun experiment though. I bet it would look extra awesome if parallax were added to the mix!

  • 0

Someone did a attempt to make a animated bokeh effect on a canvas element but this works very slow because the blur of a element uses a lot of hardware resources: http://mgrf.de/bokeh/

 

And also there were quite a few bokeh effect generators on codepen, as example: http://codepen.io/playerace/pen/Gjbhw

 

The bokeh effect was a quite popular thing for some time though it's not that popular anymore right now as it was before, currently minimal design and simple background patterns are the popular things ^^

 

And for some experimental css gradients: http://lea.verou.me/css3patterns/#

This link also contains a bokeh css gradient background.

  • 0

Thanks people,

 

This will need to animate some of the colors, so a static background won't do...  besides it'll need to work on too many resolutions to properly work that way.

 

I have been on CodePen since yesterday, some interesting pieces...

 

This one http://mgrf.de/bokeh/ could be helpful.  I don't need the movement, only the changing of the colors.

 

Thanks everyone for the info, I really appreciate

This topic is now closed to further replies.
  • Posts

    • Harmful to them because it affects their business. *Sigh*
    • TCL 75" 4K Smart TV hits lowest price, now less than £500 by Paul Hill Are you in the UK and looking for a massive 75-inch Ultra HD 4K HDR TV at a relatively affordable price? If so, check out this TCL (75P755K) 75-inch TV now because it’s at its lowest price of just £499.00, down 15% from £589.00. The model in question is slightly older, from 2024, but it’s still an excellent home entertainment upgrade given its feature set and aggressive price point. What you get: Features for the price The feature set of this model is definitely pretty impressive. It supports 4K HDR, wide colour gamut, and multiple HDR formats including HDR10+ and Dolby Vision. It also leverages MEMC (Motion Estimation & Motion Compensation), a proprietary algorithm from TCL that helps to reduce motion display blur and keep motion trails to a minimum. While MEMC will do heavy lifting to ensure the best picture, the TV only has a 60Hz refresh rate, but an effective rate of 120Hz thanks to efforts by TCL. This TCL model features Dolby Atmos 2.0 that immerses you more in whatever you’re watching on the TV. In terms of software, this TV comes with Google TV (based on Android) which is well-known and widely supported, ensuring you can use all the apps you depend on. It also supports Google Assistant, Chromecast, and voice control. The Chromecast support allows you to easily stream from your computer or phone to the TV to share what you’re watching to the people around you. The Google Assistant support can also be good if you have smart home devices around the house that can connect to it. The audio features for this TV are also good and mean you don’t need to buy a separate sound bar immediately. User experience and potential considerations According to What Hi-Fi, which reviewed the smaller 65-inch version of this TV, TCL’s TV delivers when it comes to HDR; gaming features such as low input lag, VRR, and Game Bar; wide colour gamut, and the operating system. What it didn’t like about the TV was the limited brightness, which degraded the HDR in bright rooms; the average motion handling; the lack of bass; the lack of local dimming; and the budget-oriented build quality. Making the smart buy decision If you can overlook its limitations, this TV could be a good pick if you need a new TV in the living room on a budget. If you are a serious gamer looking for a high refresh rate, or someone in a very bright room, then you will probably want to look elsewhere. Amazon is also offering free add-on services including wall mounting and unpack. If you do decide to pick up this TCL TV and find a fault with it, you have 30-days from getting the receipt to return it. TCL 75P755K 75-inch 4K TV: £499 (Amazon UK) - MSRP £589 / 15% off This Amazon deal is U.K. specific, and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon UK deals page here. Get Prime, Prime Video, Music Unlimited, Audible or Kindle Unlimited, free for the first 30 days As an Amazon Associate we earn from qualifying purchases.
    • I came here to post something similar, you beat me to it. Why on earth would somebody buy Windows again, even this shady grey-market cheap key, when they already have it and an upgrade from 10 to 11 is free?
    • I maintain that the Cybertruck was a social experiment.  "Can we convince the massively insecure petrol guzzling, Dodge Ram loving, right wing idiots to buy a poorly built, underpowered, underspecified, electric vehicle that they know everyone will laugh at them in"
  • Recent Achievements

    • Week One Done
      theevergreentree earned a badge
      Week One Done
    • Dedicated
      Fryer Tuck earned a badge
      Dedicated
    • Week One Done
      luxoxfurniture earned a badge
      Week One Done
    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      439
    2. 2
      +FloatingFatMan
      247
    3. 3
      snowy owl
      226
    4. 4
      ATLien_0
      212
    5. 5
      Xenon
      152
  • Tell a friend

    Love Neowin? Tell a friend!