meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Gradient List Bullets

CSS gradients are kind of fun.  I know, they’re a little clumsy at first, but I’ve found that with just a little practice, you can hand-author them without more than a brief refresher course on exactly how to structure the first part.  At least for me, as long as I can get the setup right, the color stops are a breeze.

As I’ve said in previous posts, gradients are images, just like a PNG or SVG or whatever.  That’s why you can write them directly into background properties and have them display.  The thing is, though, that you can use them anywhere a property accepts an image value.  Like, say, list-item-image and list-item.

Yes, that’s right: you can define gradient list bullets.  A test page I set up last week (and the screenshot shown nearby) demonstrates a few different possibilities, but there are so many more.

There are two major limitations I can see: one, you can’t layer multiple gradients together, the way you can with backgrounds.  You get one gradient image, and that’s it.  Two, this isn’t supported in Firefox, not even the nightly builds.  Every other desktop browser appears to support this, usually at least a couple of versions back, and a fair number of mobile browsers as well.  A bug has been filed by Boris—thanks, Boris!—so hopefully this limitation will fall away soon.

Fortunately, this is a textbook case of progressive enhancement.  You set the basic bullet style, then define something snazzier for browsers that can handle it (which is, again, most of them).  If your design somehow critically depends on the appearance of the list bullets, then you’ll need to use another approach.  Also, rethink your design.

A third limitation, one not nearly so momentous, is that the list bullets are kind of small as compared to the list items’ font size in most browsers, but a bit bigger in others (as Ana Tudor pointed out; thanks, Ana!).  So if you’re going to express yourself with list bullets, be bold and not too complex, and realize there will be some sizing differences across browsers.

A fourth limitation is performance.  If you make your gradients too complex, especially if they’re radial gradients, you may degrade the user experience, particularly on mobile.  As always, use your new-found power responsibly.  Thank you.

Eight Responses»

    • #1
    • Comment
    • Mon 9 Feb 2015
    • 0050
    Eric Meyer wrote in to say...

    (Author’s note: I accidentally published this when I meant to save a revision for further editing, so this article may get some updates in the coming days, after I’ve had some of the sleep I all too clearly need. And yes, I know about the “Confirm Publish” plugins. Too late now!)

    • #2
    • Comment
    • Mon 9 Feb 2015
    • 0146
    Robert Smith wrote in to say...

    That’s a neat little trick Eric, thanks for sharing.

    Under most circumstances though, if I am to style bullets in anway, be it with a gradient, svg icon or other I tend to prefer working with psuedo elements. Mostly because of the extra control when positioning them, and now that you mention the FF issue this effect would have more widespread support.

    Nonetheless thanks for pointing out that anything that can accept a backgroind image can also accept a gradient. Kind of strange that we cannot add multiple gradient’s though, I’d have assumed all elements that accept a background image would behave in the same fashion when it came to gradients.

    • #3
    • Comment
    • Mon 9 Feb 2015
    • 0927
    Ana wrote in to say...

    About the “list bullets are kind of small as compared to the list items’ font size” part. This is the thing that caught my eye when you tweeted the test page a few days ago – they’re smaller than the font size in Chrome/ Opera, but they’re slightly larger than the font size in IE. I wish there was a way of controlling this to make it consistent across browsers, like there is background-size for actual backgrounds.

    • #4
    • Comment
    • Mon 9 Feb 2015
    • 1026
    Boris wrote in to say...

    Eric, I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1131073 to add support in Firefox.

    • #5
    • Comment
    • Mon 9 Feb 2015
    • 1030
    Eric Meyer wrote in to say...

    Thanks, Boris! That was on my list of things to do today (along with compiling a list of other gradient bugs to submit to various browser vendors).

    • #6
    • Pingback
    • Thu 12 Feb 2015
    • 1503
    Received from Links for light reading (13/02/15) | Max Design

    […] Gradient List Bullets […]

    • #7
    • Comment
    • Wed 25 Feb 2015
    • 1859
    Ralph wrote in to say...

    Well.. I don’t like gradients.. anywhere. Or maybe for background. Maybe it’s my problem because gradient remind me of my ugly site from the past :)

    • #8
    • Comment
    • Fri 27 Feb 2015
    • 1542
    WebVision wrote in to say...

    Nice tip! I’m using background image with padding on li. Never had any problems with browser compatibility.

    I can see value in this proposition by not loading another image. Hope FF get this fix soon.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


February 2015
SMTWTFS
January March
1234567
891011121314
15161718192021
22232425262728

Sidestep

Feeds

Extras