CODEWITHSUNDEEP
cssgradient
Harrison Tran
Harrison Tran

Reputation: 1621

Mozilla Gradient to other Gradients

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);

Upvotes: 1

Views: 176

Answers (3)

Jules
Jules

Reputation: 4339

There are many limited gradient generators available on the net but they can't create the SVG (IE9) code or old Webkit code for complex gradients that involve repeats, angles, explicit positions etc.

There's a small app at VisualCSSTools that will create the code for all CSS linear and radial gradients.

The only limitation is that the old Webkit syntax does not allow elliptical radial gradients; these are converted to circular gradients.

Upvotes: 0

Rajiv Pingale
Rajiv Pingale

Reputation: 1015

This will help you for the same

http://www.colorzilla.com/gradient-editor/

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22181

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 :)

Upvotes: 2

Related Questions