Convert standard gradient syntax to -webkit-gradient and others

This content originally appeared on Lea Verou’s blog and was authored by Lea Verou

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

This content originally appeared on Lea Verou’s blog and was authored by Lea Verou

Print Share Comment Cite Upload Translate Updates

APA

Lea Verou | Sciencx (2011-03-26T00:00:00+00:00) Convert standard gradient syntax to -webkit-gradient and others. Retrieved from https://www.scien.cx/2011/03/26/convert-standard-gradient-syntax-to-webkit-gradient-and-others/

MLA

" » Convert standard gradient syntax to -webkit-gradient and others." Lea Verou | Sciencx - Saturday March 26, 2011, https://www.scien.cx/2011/03/26/convert-standard-gradient-syntax-to-webkit-gradient-and-others/

HARVARD

Lea Verou | Sciencx Saturday March 26, 2011 » Convert standard gradient syntax to -webkit-gradient and others., viewed ,<https://www.scien.cx/2011/03/26/convert-standard-gradient-syntax-to-webkit-gradient-and-others/>

VANCOUVER

Lea Verou | Sciencx - » Convert standard gradient syntax to -webkit-gradient and others. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2011/03/26/convert-standard-gradient-syntax-to-webkit-gradient-and-others/

CHICAGO

" » Convert standard gradient syntax to -webkit-gradient and others." Lea Verou | Sciencx - Accessed . https://www.scien.cx/2011/03/26/convert-standard-gradient-syntax-to-webkit-gradient-and-others/

IEEE

" » Convert standard gradient syntax to -webkit-gradient and others." Lea Verou | Sciencx [Online]. Available: https://www.scien.cx/2011/03/26/convert-standard-gradient-syntax-to-webkit-gradient-and-others/. [Accessed: ]

rf:citation

» Convert standard gradient syntax to -webkit-gradient and others | Lea Verou | Sciencx | https://www.scien.cx/2011/03/26/convert-standard-gradient-syntax-to-webkit-gradient-and-others/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.