• 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

    • Microsoft Project 2021 Professional for Windows now just $9.97 by Steven Parker Today's highlighted deal comes from our Apps & Software section of the Neowin Deals store, where you can save $240 off Microsoft Project 2021 Professional for Windows. Be the boss of any project with Microsoft Project Professional 2021. This powerful yet easy-to-use app lets you stay on track, from small tasks to larger projects. Manage your projects more efficiently with the right timelines, budgets, and resources. You'll get automated scheduling tools as well as built-in reports to help you reduce inefficiencies and make better, informed decisions. Project management has never been this easy with Microsoft Project Pro. Lifetime license for Microsoft Project Professional 2021 One-time purchase installed on 1 Windows PC for use at home or work Instant Delivery & Download – access your software license keys and download links instantly Free customer service – only the best support! Why Microsoft Project Professional 2021? Pre-built templates help you get your project started on the right track Sync with Project Online and Project Server Submit timesheets to capture time spent on project and non-project work Run what-if scenarios to make the most of your task assignments Auto-populate start and end dates based on dependencies Visually represent complex schedules with built-in multiple timelines Supports Long-Term Servicing Channel (LTSC) and is compatible with Office LTSC and Office 2021 Good to know Length of access: lifetime Redemption deadline: redeem your code within 30 days of purchase Access options: desktop Max number of device(s): 1 Version: 2021 Pro Updates included Microsoft Project 2021 Professional for Windows normally costs $249.99, but it can be yours for just $14.97 for a limited time, that's a saving of $235. For terms, specifications, and license info please click the link below. Use MSO5 when checking out for additional $5 off. Coupon Expires June 29 Get Microsoft Project 2021 Professional for Windows for just $9.97, or learn more Although priced in U.S. dollars, this deal is available for digital purchase worldwide. We post these because we earn commission on each sale so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin Whitelist Neowin by not blocking our ads Create a free member account to see fewer ads Make a donation to support our day to day running costs Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: Neowin benefits from revenue of each sale made through our branded deals site powered by StackCommerce.
    • Weird how some people don't need to crash 7 rockets before they get it right.
    • Or it's a bug that can easily be fixed with an update. My guess is the limitation is there to prevent game makers from doing dumb things like having a racing game constantly rumble while the car is in motion. Sounds like the threshold or detection needs to be tweaked if it is triggering for no reason.
    • Nice I guess. Azure's DaaS feature has supported that for years. It's so odd to me how MS is deploying Azure and 365 DaaS as two totally different services with different features. I would think the 365 cloud desktops would just be a slightly dumbed down frontend that manages the same service.
    • Oh and gaming on a PC cost way more. To get PS5 Pro performance on a PC it will cost you more, especially with the crazy GPU costs today. While you can play Last of US and Horizon, finally, you cant play GT7 unless you have a PS5 (other games as well).
  • Recent Achievements

    • Week One Done
      slackerzz earned a badge
      Week One Done
    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well
    • Week One Done
      TBithoney earned a badge
      Week One Done
    • First Post
      xuxlix earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      669
    2. 2
      ATLien_0
      284
    3. 3
      Michael Scrip
      223
    4. 4
      +FloatingFatMan
      196
    5. 5
      Steven P.
      137
  • Tell a friend

    Love Neowin? Tell a friend!