Question

How do I make gradients for other browsers starting from a Mozilla gradient. I have used a Mozilla gradient for awhile but I recently found out you need to make a gradient for every browser in the css code inorder for it to work on all browsers. I’ve only seen websites let you create a gradient and it will generate the code for all browsers but I have not found something to make a moz gradient for all other browsers.

This is the gradient I want converted:

background-image: -moz-linear-gradient(center top , #9BC0DD, #C9DEED);

Answer 1

The tool that @omarello cited is a great tool. Isn’t this gradient the one you’re trying to reproduce?

EDIT: what I did to reproduce your gradient:

• below the name of the gradient is the gradient panel with 4 color stops by default.
• below the gradient, delete the 2 color stops at ~50% and keep those on left and right. The black ones above are for opacity, ignore them for this opaque gradient
• click on the color stop on the left. Things change in the Stops fieldset below
• click on the color box inside the Stops zone, a color picker appears! (this is the not-so-obvious-on-first-time trick)
• on bottom-right, paste your first color hex code (it doesn’t matter if it’s with the # or not, colorzilla is smart enough) and click the OK button
• same for the other color stop on the right
• in the Preview zone, you want Vertical orientation (because center top is the same as top I guess, neither horiz., diag. nor radial) and IE code
• then you’ve a Permalink that you can paste as a comment in your CSS next to the generated code. You or your colleagues will thank yourself in 6 months when you want to change slightly this gradient or when you’ll have to update your gradients because of Browser version 18.0. Paste permalink, change things, paste generated CSS, save 🙂