• 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

    • Meanwhile Honda just had a successful reusable rocket test, should be a thread about them and not this maniacal maniacs madness https://interestingengineering.com/space/honda-stuns-world-with-reusable-rocket-launch
    • Jesus…. dont you know who Jesus is? my god… are you for real?
    • Nope not when you are close to being worth a trillion dollars stop being a simp for billionaires
    • Detective game 'The Operator' is free to claim on the Epic Games Store this week by Pulasthi Ariyasinghe The Epic Games Store's weekly giveaways promotion has just refreshed. Last week's offer of Two Point Hospital has now gone away, and to take its place, the store has brought in The Operator, a detective puzzle game developed by Bureau 81. As always, you have seven days to add the latest game permanently to your Epic Games Store library. Released in 2024, The Operator comes touting an investigation story that puts you into the shoes of a new hire at the Federal Department of Intelligence (FDI), where you are tasked with analyzing evidence, fact-checking, and solving a streak of mysterious crimes using the agency's advanced investigative software. Everything from murders and missing people to cyberattacks are the sort of crimes you'll be investigating throughout the game, all using the agency's unique software console to dig through evidence and personal data. As the story progresses, a conspiracy also comes through from another hacker that paints the FDI in a different light. Here's how the studio teases the hacker's existence even in the game description: The Operator giveaway on the Epic Games Store is now active, and it will last until June 26. When it's not on sale, the game costs $13.99 to purchase, but PC gamers can add it to their library for no cost during the seven-day timeframe. Another PC game will come in as the next freebie on the same day that this entry expires.
  • Recent Achievements

    • First Post
      MikeK13 earned a badge
      First Post
    • One Month Later
      OHI Accounting earned a badge
      One Month Later
    • Week One Done
      OHI Accounting earned a badge
      Week One Done
    • First Post
      Thornskade earned a badge
      First Post
    • Week One Done
      Higante88 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      715
    2. 2
      ATLien_0
      272
    3. 3
      Michael Scrip
      203
    4. 4
      +FloatingFatMan
      180
    5. 5
      Steven P.
      128
  • Tell a friend

    Love Neowin? Tell a friend!