Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 Gradients from Webkit to Moz

Tags:

css

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)
    );
like image 875
Satch3000 Avatar asked Oct 09 '11 22:10

Satch3000


People also ask

Can you do gradients in CSS?

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)

What is moz linear gradient in CSS?

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.

What are the three main types of gradients in CSS?

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.

Can CSS transition linear 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.


2 Answers

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+) */ 
like image 117
Book Of Zeus Avatar answered Sep 22 '22 07:09

Book Of Zeus


I think this will be helpful hint -> -moz-linear-gradient

like image 34
japrescott Avatar answered Sep 21 '22 07:09

japrescott