• 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

    • Exactly, the E-cores actually give you good performance for what they offer, it's no surprise that Intel is doubling down on more E-cores instead of more P-cores. The LP-cores are good for when you're system is just sitting there idle and waiting to be used. Every core has it's place tbh, it's just up to Intel to and MS to work to get the scheduler right.
    • Report: Trump's T1 Mobile off to a rocky start with messy pre-orders by David Uzondu You might have heard by now that The Trump Organization, spearheaded by President Trump's sons, Donald Trump Jr. and Eric Trump, is launching yet another product to add to the collection. This time, it is a gold smartphone, the T1, and a companion wireless service. The whole operation is being pushed with the usual "America-first" bravado, but it seems they forgot to get the basics right. If you thought you could just hop online and secure your patriotic pocket computer, you are in for a nasty surprise, as the whole process appears to be fundamentally broken. A new report from 404Media details this chaos perfectly, as one of their writers tried to order one of the T1 phones. The goal was simple: pay the $100 preorder deposit and see what this thing is all about when it ships. What happened next was a masterclass in how not to conduct e-commerce. The website crashed, booted him to an error page, and then, for good measure, charged his credit card the wrong amount entirely, taking $64.70. And get this, he received a confirmation email saying his order would ship... despite never once being asked for his shipping address. It is, in his words, the "worst experience I've ever faced buying a consumer electronic product". To add insult to injury, when he tried to log into the new account, the site prompted him to create, and he was immediately met with yet another error page, locking him out. The shoddy experience is not just limited to the checkout. Neowin found a bunch of errors on the official product page. Sure, it boasts a big 6.8-inch Punch Hole AMOLED display with a 120Hz refresh rate and a 50MP main camera, which sounds nice on paper. But then you notice the company completely forgot to mention what processor powers the phone, which is probably a MediaTek. At one point, the page bizarrely listed a "5,000 mAh long life camera," though that has since been fixed. By the way, there's good reason to doubt that this phone will be made in America, despite the press releases insisting it will be. Sourcing all the necessary components without using foreign parts is unbelievably difficult and expensive, something even Apple does not do. The more likely scenario, according to Max Weinbach, is that this is simply a reskin of a much cheaper device, maybe the T-Mobile REVVL 7 Pro 5G, which retails at a fraction of the T1's $499 asking price. The T1 Mobile joins a sprawling collection of other products likely aimed at the same loyal customer. The catalog of gear for this audience already includes the gold "Never Surrender" sneakers, the "God Bless the USA" Bible, "Victory47" perfume, digital trading cards, $TRUMP memecoins, and more. It is still very early days, of course, and while one might forgive some teething issues for a new venture, this initial preorder phase has been exceptionally chaotic. Hopefully, things will become much clearer once there is a firm launch date and a physical product to test. Do you plan to buy the T1 and move to Trump Mobile?
    • Is this release set for the end of this year or for next year?
  • Recent Achievements

    • Week One Done
      korostelev earned a badge
      Week One Done
    • Week One Done
      rozermack875 earned a badge
      Week One Done
    • Week One Done
      oneworldtechnologies earned a badge
      Week One Done
    • Veteran
      matthiew went up a rank
      Veteran
    • Enthusiast
      Motoman26 went up a rank
      Enthusiast
  • Popular Contributors

    1. 1
      +primortal
      683
    2. 2
      ATLien_0
      268
    3. 3
      Michael Scrip
      184
    4. 4
      +FloatingFatMan
      177
    5. 5
      Steven P.
      141
  • Tell a friend

    Love Neowin? Tell a friend!