CODEWITHSUNDEEP
css
Siddiq Baig
Siddiq Baig

Reputation: 586

background-image CSS for gradient in webkit browser

I have CSS for Mozilla

background-image: -moz-linear-gradient(center top, 
                                       hsl(0, 0%, 20%), hsl(0, 0%, 13%));

and I need this CSS to work with WebKit browsers & IE as well.

Upvotes: 0

Views: 1720

Answers (3)

AfromanJ
AfromanJ

Reputation: 3932

I use this gradient generator.

Example:

background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #BF50D8),
    color-stop(1, #70CDFF)
);
background-image: -o-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //Opera
background-image: -moz-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //Firefox
background-image: -webkit-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //Safari & Chrome
background-image: -ms-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //IE
background-image: linear-gradient(to bottom, #BF50D8 0%, #70CDFF 100%);

Upvotes: 1

Fex del Sollo
Fex del Sollo

Reputation: 386

Here is how to add gradient crossbrowser:

background: -o-linear-gradient();
background: -webkit-gradient(); /* Older webkit syntax */
background: -webkit-linear-gradient();
background: -ms-linear-gradient();

Example on webkit:

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(), to());

Upvotes: 0

Michal Olszowski
Michal Olszowski

Reputation: 805

For Internet Explorer it should be 

background-image: -ms-linear-gradient

Ms from Microsoft of course.

And for safari:

-webkit-linear-gradient

Upvotes: 0

Related Questions