I have this webkit gradient and need it to work on Moz Firefox.
Does anyone know of a tool of how to convert it?
Here is the webkit gradient:
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #717172),
color-stop(0.5, #3a3a3a),
color-stop(0.51, #0d0d0f),
color-stop(1, #0f0f10)
);
CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point)
The CSS -moz-linear-gradient Mozilla extension property value was introduced in Gecko 1.9. 2 (Firefox 3.6). Gradients are smooth transitions between two or more specified colors. Use of CSS gradients can replace images and reduce download time, create a more flexible layout, and look better while zooming.
There are 3 different CSS gradients: linear, conic, and radial. Each gradient uses a CSS function to pass in multiple color arguments. The colors can be in the format of hex, hsla, rgba or named colors. In addition, you can pass in direction and angles to specify the shape and transition of the gradient.
In CSS, you can't transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two. He documents a clever tactic of positioning a pseudo element covering the element with a different background and transitioning the opacity of that pseudo element.
Here's the best tool for this:
http://www.colorzilla.com/gradient-editor/
background: #717172; /* Old browsers */
background: -moz-linear-gradient(top, #717172 0%, #3a3a3a 50%, #0d0d0f 51%, #0f0f10 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#717172), color-stop(50%,#3a3a3a), color-stop(51%,#0d0d0f), color-stop(100%,#0f0f10)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 51%,#0f0f10 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 51%,#0f0f10 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #717172 0%,#3a3a3a 50%,#0d0d0f 51%,#0f0f10 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#717172', endColorstr='#0f0f10',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top bottom, #717172 0%,#3a3a3a 50%,#0d0d0f 51%,#0f0f10 100%); /* W3C (Firefox 16+) */
I think this will be helpful hint -> -moz-linear-gradient
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With