Grow your CSS skills. Land your dream job.

Elaborate CSS Gradient

  • # April 11, 2013 at 1:51 pm

    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.

    # April 11, 2013 at 2:23 pm

    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. :)

    # April 11, 2013 at 4:09 pm

    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.

    # April 11, 2013 at 4:43 pm

    @Cyanoxide, these aren’t mine, but I found these on codepen by searching “gradient background” I believe that’s pretty close to what you were looking for

    http://codepen.io/rginnow/pen/kpItC

    http://codepen.io/oxnard/pen/rieag

    # April 11, 2013 at 5:49 pm

    @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.

    # April 11, 2013 at 7:28 pm

    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”)

    # April 11, 2013 at 7:37 pm

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".