Convert standard gradient syntax to -webkit-gradient and others

Screenshot of the demoI hate -webkit-gradient() with a passion. Its syntax is cumbersome and it’s really limited: No angle support, no <length>s in color stop positions, no implied color stop positions, no elliptical gradients… So, I was really happy, when Webkit implemented the standard syntax this January. However, we’re still stuck with the horrid -webkit-gradient() for quite a while, since older Webkit browsers that don’t support it are widely used at this time.

Today, I decided to finally spare myself the hassle of converting my standard gradient syntax to -webkit-gradient() by hand. Tasks like that shouldn’t be handled by a human. So, I coded a little script to do the chore. Hope it helps you too:
View demo

It currently only supports linear gradients, but I plan to add radial ones in the future. Also, when I get around to cleaning up the code a bit, I’ll add it on Github.

(Hope I didn’t leave in any very stupid bug, it’s really late here and I’m half asleep.)

  • Webling

    thanks, thats helpful and you didn’t forget opera. thumb up

    • http://leaverou.me Lea Verou

      I could never forget Opera, I know too many people there to do so :P

  • Pingback: It’s stuff like this that makes me love being a web developer « Atomic Robot Design

  • http://twitter.com/jdeerhake John Deerhake

    I actually use Compass/SASS to do this same thing. It’s pretty handy.

    It’s funny that soon after your post about disliking CSS preprocessors you come out with your own (albeit very simplistic) one. :)

    • http://leaverou.me Lea Verou

      That’s a completely different thing. Explain to me which of the preprocessor disadvantages I mentioned applies to this one.

  • Pingback: Create complex RegExps more easily | Lea Verou

  • Pingback: SWL-Projekt » Create complex RegExps more easily

  • Rbiggs

    I’m curious why you hate Webkit so much. I’m sure you’re aware that there wouldn’t be any kind of CSS gradients if the Webkit team hadn’t introduced their notation first. Not to mention text-shadow, box-shadow, border-image, transitions, transforms, 3d transforms, canvas, etc.

    • http://leaverou.me Lea Verou

      IE6 was a great browser when it was released. Should we love it for all eternity? Yes, -webkit-gradient() was pioneering. But compared to the now standard gradient syntax, it’s worse than crap.

  • http://twitter.com/4esn0k Ivanov

    You can add “data:url” generation to  your script.
    background-image: url(data:image/png;….) + background-size: 100% 100%; – for browsers, that doesn’t support css gradients! (but supports background-size (IE9+,O10+,…)
    (“No angle support, no s in color stop positions, no implied color stop positions, no elliptical gradients…”)

    • http://leaverou.me Lea Verou

      I’m planning to add SVG generation ;)

      • http://twitter.com/4esn0k Ivanov

        currently SVG as css bacgrkound is not so cross browserly supported….
        I create data:url generator from “linear-gradient”, it uses “canvas” to draw image. 

        • http://twitter.com/4esn0k Ivanov

          i can help your with svg/data:uri
          tweet me, if you are planning to enchance your script.

  • http://twitter.com/havarhen Håvar Henriksen

    Thank you. But it would’ve been great to have a reverse of this function, to convert from old -webkit-gradient to the different new stuff. Like this: “background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#5e5e65));”.

  • Klaygomes

    This doesnt work for “linear-gradient(center top , rgba(226, 226, 226, 0.14), rgba(34, 34, 34, 0.14))”

    • http://leaverou.me Lea Verou

      Because “center top” is invalid. That gradient will not work anywhere.

  • osirisgothra

    THANKS
    i hate it with a passion as well

  • Nova

    Brilliant – as a complete noob who played with CSS gradients for the first time yesterday, you’ve saved me a huge headache – thank you!

  • Karrysta

    Nice article good.