Elaborate CSS Gradient

[Cyanoxide]

Quick question, I’m not the most savy when it comes to the new CSS gradients…well relatively new. I can make basic two colour gradients but tend to use third party web apps to generate the code for a gradient if it has a bit more to it than that.

I’ve only ever seen vertical or horizontal gradients but I’d ideally like to make a gradient that changes colour horizontally as well as vertically with another change right in the centre. Like the diagram below:

http://i29.photobucket.com/albums/c265/seph-53/grad_zps6658bed8.png

Essentially having a different colour at each one of the points in that image. Also to clarify, the colours I used in that image do not reflect the colours I want to use, mine will be far more subtle. Any help will be greatly appreciated.

[Kitty Giraudel]

You seem to be looking for radial gradients.

Anyway, Ana Tudor wrote a wonderful article about computing CSS gradients for my blog a few weeks ago: http://hugogiraudel.com/2013/02/04/css-gradients/. You may want to have a look at this. :)

[Cyanoxide]

At a glance that article may be straight over my head but I will definitely look into it. I was under the impression that radial gradients worked with the same principle as vertical or horizontal with one line of colour alteration only stretched around from the center point. Obviously I was wrong.

[Cyanoxide]

@ChrisP That second one is spot on what I’m looking for. Never used Codepen before, assuming it’s quite a useful tool now. Much appreciated.

[ElijahFowler]

Let me add one quick note,

The kind of gradient is called a conical gradient, and there are hints on the web about support for them in CSS4, then we could use one line for the gradient instead of using multiple gradients. Like ChrisP’s link here’s another method that could work for you: [LINK](http://cdpn.io/qeoBj “Fake Conical Gradient”)

[Cyanoxide]

Much appreciated, I’ll see which one works best when I open everything back up tomorrow. Cheers for the info too, Conical gradients would make life so much easier. I designed the background for my website in photoshop for my mock up and didn’t realise how annoy it would be to replicate but one of these should do the trick, thank you.

[Author]

Posts