homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

gradients in css

 4:06 am on Jun 8, 2012 (gmt 0)

How do you create gradients in CSS, and is it possible to do drop shadows or inner shadows too?



 2:02 pm on Jun 8, 2012 (gmt 0)

Hi whatson, one of the articles I mentioned in your other post uses gradients in the examples. Try css3.info for examples (with explanations) of text-shadow and box-shadow.

[edited by: alt131 at 3:11 pm (utc) on Jun 8, 2012]


 2:57 pm on Jun 8, 2012 (gmt 0)

Thanks, what about browser compatibility?


 3:23 pm on Jun 8, 2012 (gmt 0)

Hi whatson ... not a great answer, depending on your target user. box-shadow in ie9+, but not text-shadow. Most of the other major browsers have supported both for a number of versions, or proprietary extensions before that.

If you need to give earlier ie an equivalent experience, perhaps filters - but note they are very resource heavy.


 3:47 am on Jun 9, 2012 (gmt 0)

Ok, so best to just use an image?


 9:40 am on Jun 9, 2012 (gmt 0)

Hi whatson, "best" really depends on a number of factors and I wouldn't want to say without more information. For example:

  • What browser versionsm platforms and devices are you expecting your target user to be using?

  • Are you insisting users of older or less able versions have an equal experience - or just similar? (Ideally we'd all say equal, but many folk are still surfing with ancient technology, you have to draw a line of support somewhere.)

  • What is the weight of the pages. For example, are they loaded with graphics etc that already mean lots of hits on the server and slow download times already.

  • Do you really need a gradient and/or is it possible to duplicate the effect of a gradient with clever design? For example, nice shadowy borders can sometimes be simulated using a double border and the right choice of colours.
I know you've just started and this might seem a bit of overload, but these are the sorts of things to think about when making these kinds of decision.

 2:10 am on Jun 13, 2012 (gmt 0)

You can experiment with the Ultimate CSS Gradient Generator by Colorzilla.


 2:46 am on Jun 13, 2012 (gmt 0)

Even though this thread is getting old, I thought I'd post a note about browser compatibility. Current versions of Firefox, Chrome, Safari, and Opera all support it, although some older versions lack support for radial gradients. Opera Mini lacks support and has not announced future support. IE 10 will support it, and older versions can do two color gradients with filters.

I'm all thumbs when it comes to graphics programs, so I enjoy working with CSS gradients. But it's like so many such things, you have to limit them to non-critical features and provide fall-back instructions for the laggards.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved