Applying css3 gradients with jQuery

Question

Eventually, I wish to dynamically alter gradients based on different things, but how do I get jquery to apply a css3 gradient?

 //works
 $(element).css("background-image", "url(http://www.google.co.uk/images/logos/ps_logo2.png)");  

 //doesn't work
 $(element).css("background-image","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

 //doesn't work
 $(element).css("background-image","-moz-linear-gradient(left center,rgb(194,231,255) 28%,rgb(255,255,255) 28%");

What am I missing? I've also tried

 $(element).css({background: "-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255)"});

Are these approaches not valid?

Possible duplicate? stackoverflow.com/questions/5735521/jquery-css-gradient/5735588 — Zirak
– Zirak, Commented May 16, 2011 at 12:04
Note also that if you're trying to apply CSS styles with invalid whitespace in them, they may simply not apply (or at least this is what happened for me in Chrome.) In which case you'll want to go through and remove all extra whitespace in the inspector until the gradient updates, and then update your javascript accordingly — Jack
– Jack, Commented Mar 25, 2020 at 20:07

Dutchie432 · Accepted Answer · 2014-01-30 10:46:51Z

22

Your second approach looks OK... Maybe you need to css styles for non-webkit browsers as well... Cross-Browser CSS Gradient

This works for me in Chrome

$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});

Also have a look at: http://www.colorzilla.com/gradient-editor/

edited Jan 30, 2014 at 10:46

answered May 16, 2011 at 12:00

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mrid · Accepted Answer · 2021-05-16 14:32:23Z

4

Another option is to use the jQuery addClass method. This allows you to dynamically add and remove classes and therefore any formatting associated with that class including gradients.

edited May 16, 2021 at 14:32

mrid

5,7886 gold badges34 silver badges78 bronze badges

answered Mar 5, 2012 at 13:43

WSimpson

412 bronze badges

Comments

Sanu Uthaiah Bollera · Accepted Answer · 2014-01-24 12:08:44Z

3

Here is a small piece of example...

$("p").css({background:'linear-gradient(red,blue,red)'});

answered Jan 24, 2014 at 12:08

Sanu Uthaiah Bollera

93711 silver badges13 bronze badges

Comments

Ry- · Accepted Answer · 2013-07-18 00:44:44Z

1

I'm using the hyphenated syntax in the JSON format (I always use the JSON format to be consistent). And it's working fine in both Chrome and Firefox.

For example:

$("#googleFeed div:even").css({
    'background':'-webkit-linear-gradient(top,white,black)',        
});

edited Jul 18, 2013 at 0:44

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

answered Mar 30, 2013 at 1:13

Puneet Lamba

7891 gold badge8 silver badges15 bronze badges

Comments

Tom Slabbaert · Accepted Answer · 2020-08-09 15:32:35Z

0

try this

<div class="mygradient" />

$( '.mygradient' ).css( 
    "background-image", 
    "linear-gradient( to right, #dc8a8a 50%, red 10% )" 
);

edited Aug 9, 2020 at 15:32

Tom Slabbaert

22.5k10 gold badges34 silver badges45 bronze badges

answered Aug 9, 2020 at 15:07

ADamian17

11 bronze badge

Comments

Kijewski · Accepted Answer · 2012-07-08 03:37:28Z

-2

When using .css() in jquery, I believe you have to use the shortened versions of the attributes. For example, margin-left would be marginLeft

$(element).css("backgroundImage","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

edited Jul 8, 2012 at 3:37

Kijewski

26.1k14 gold badges108 silver badges149 bronze badges

answered Jul 7, 2012 at 18:26

motown

11

4 Comments

motown Over a year ago

side note, web-kit gradient isn't a background image its a background

Ahmad Alfy Over a year ago

and it should be background-image when you are using the syntax you provided. When you write multiple properties you should use the camelCase ... just like this : $(element).css({ backgroundImage : 'whatever'; })

Jimbo Jonny Over a year ago

This is only true when using the object notation to set properties, such as .css({backgroundImage:blah}), not the implementation he's using of .css('background-image', blah)

Jimbo Jonny Over a year ago

Also, Motown is wrong, it's background-image, and background alone is only a shorthand way of setting the background-image.

Collectives™ on Stack Overflow

Applying css3 gradients with jQuery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related