• 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

    • So, they catched 2-3 of the bad guys. The other 30.000 went undetected.
    • Borderlands 2 is free on Steam to grab right now by Pulasthi Ariyasinghe The fourth installment in the main Borderlands series is only a few months away from launch, and now there's a good opportunity for new players to see what all the excitement is about. Developer Gearbox today launched a giveaway for Borderlands 2, offering the base game for all PC gamers to claim for free and play through its campaign. The promotion is running on Steam, making it an easy grab for most. The 2012-released action RPG takes players to the lawless planet of Pandora for a humorous adventure concerning a rebel group going up against the fan-favorite tyrannical boss, Handsome Jack. Taking the role of Vault Hunters searching for a grand treasure on the planet, the characters Axton (Commando), Maya (Siren), Zer0 (Assassin), and Salvador (Gunzerker) are available to play in the base game. Each Vault Hunter has their own skill trees and ultimate abilities, letting players mix and match many of their play styles when progressing through the campaign. However, perhaps the most important aspect of the Borderlands series is the guns. The looter shooter elements of the title mean that there are countless weapon and gear variations, each coming with unique stats and effects that vary depending on the rarity. Borderlands 2 supports up to 4-player cooperative play with drop-in, drop-out multiplayer. Your character's loadout and progression will follow you for any games you join as well. The Borderlands 2 giveaway on Steam is live right now. It's slated to come to an end on June 8 at 10am PT. For those looking to expand on the Borderlands universe after grabbing the freebie, all the games and their massive number of DLCs are discounted as part of a franchise sale on Steam right now too. Don't forget that PC players can also pick up Bethesda's Deathloop right now for free as well, with that promotion currently running on the Epic Games Store.
    • They need to pay me more than that!
    • Yep, same. One less source of brainrot to boot.
  • Recent Achievements

    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
    • Week One Done
      jfam earned a badge
      Week One Done
    • First Post
      survivor303 earned a badge
      First Post
    • Week One Done
      CHUNWEI earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      428
    2. 2
      +FloatingFatMan
      199
    3. 3
      snowy owl
      192
    4. 4
      ATLien_0
      187
    5. 5
      Xenon
      142
  • Tell a friend

    Love Neowin? Tell a friend!