• 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.
  • Popular Now

  • Posts

    • Look around you, everybody is making fun of Linux, even the author of this article, if you can't handle jokes maybe stay off the internet and go recompile your kernel or something.
    • ChatGPT memory upgrade extends to Free users by Pradeep Viswanathan Back in April, OpenAI announced a major upgrade to ChatGPT’s memory feature. The improved memory allowed ChatGPT to reference a user’s past chats to provide more personalized, relevant, and useful responses. Until today, this enhanced memory was available only to ChatGPT Plus and Pro users. Today, OpenAI announced that this memory upgrade is now rolling out to all logged-in ChatGPT Free users. This is big news, as it will impact the ChatGPT experience for hundreds of millions of users. For example, if a user previously mentioned liking Indian food, ChatGPT may remember that and suggest Indian dishes the next time the user asks, “What should I have for lunch?” However, OpenAI is not rolling out the same full-featured memory offered to paid users. Instead, Free users will receive a lightweight version that provides short-term continuity across conversations. ChatGPT Plus and Pro users will continue to benefit from longer-term memory and a deeper understanding of their preferences. To enable this memory feature, ChatGPT Free users in the EEA (EU + UK), Switzerland, Norway, Iceland, or Liechtenstein can go to Settings > Personalization > Memory > Reference chat history and turn it on. OpenAI will also present a prompt to enable this setting. All ChatGPT Free users outside the above regions will have memory enabled by default. Depending on their preferences, users can manage memory using these two settings: Reference saved memories: Details you’ve explicitly asked ChatGPT to remember, such as your name, favorite color, or dietary preferences. Reference chat history: ChatGPT can use information from your previous chats to make future conversations more helpful. While the capabilities differ between the free and paid tiers, this latest improvement to ChatGPT will deliver responses that feel more relevant and personalized for millions of users.
    • Actually there is rules about trolling here on Neowin. Thanks for playing but we are done here.
    • Do you know the difference between "crying over" and "making fun of"?
  • Recent Achievements

    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter
    • One Month Later
      Marwin earned a badge
      One Month Later
    • One Year In
      fred8615 earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      242
    2. 2
      snowy owl
      156
    3. 3
      ATLien_0
      144
    4. 4
      +FloatingFatMan
      138
    5. 5
      Xenon
      132
  • Tell a friend

    Love Neowin? Tell a friend!