CODEWITHSUNDEEP
javascripthtmlcssreactjs
yehudit Greenwald
yehudit Greenwald

Reputation: 491

Inline style in react background: linear-gradient

I'm trying to make inline styles with a background that has a linear-gradient but the style is not being applied.

Here is my code:

 <div className="card" style={{background:"linear-gradient(to bottom, Transparente 0%,Transparente 50%,red 50%,red 100%)"}}/>

When I add "simple" color for my background, meaning no linear-gradient, it works well.

<div className="card" style={{background:"red"}}/>

Thanks in advance.

Upvotes: 37

Views: 112421

Answers (11)

Ali Safari
Ali Safari

Reputation: 1775

for react version 17.0.2, i used bacgroundImage property to style div background as follows:

   <div
    style={{
      backgroundImage: "linear-gradient(yellow,lightgreen)",
      color: "darkred",
    }}
  >
    Inline style in react background: linear-gradient
  </div>

enter image description here

Upvotes: 6

Prakarsh Gupta
Prakarsh Gupta

Reputation: 71

So, I came across your post because I was facing the same issue, but I've found a solution.

<button style={{ backgroundImage: `linear-gradient(to right, rgba(0, 224, 255, 1), rgba(0, 133, 255, 1))`, }} >

Note that I've used ` instead of ' which solved the issue, and tbh I have no idea why.

Upvotes: 5

Mahdieh Shavandi
Mahdieh Shavandi

Reputation: 8635

I had something like:

<div style={{background: `linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic});`}}/>

This was not working because of the ; at the end of the linear-gradient. I removed it and it worked.

Upvotes: 15

Jaison James
Jaison James

Reputation: 4552

Used like this with a variables

const color1 = "#343336";
const color2 = "#B408A4";
style={{background: `linear-gradient(to bottom,  ${color1} 0%,${color2} 100%)`}}

Upvotes: 7

Vinod Kumar
Vinod Kumar

Reputation: 1311

Please use Below code for adding the gradient and change the value (for Safari and Chrome)

-webkit-gradient: (linear, left top, right top, from(rgba(0,0,0,0.5)), color-stop(50%, rgba(0,0,0,0.2)));

Upvotes: 1

juicinurflo
juicinurflo

Reputation: 1

If you are trying to do it inline this worked for me.

<Button style={{ backgroundImage: 'linear-gradient(#f67a36,#ed008c)' }}/>

Upvotes: 0

user9578753
user9578753

Reputation:

Iam a little bit late maybe, but I found a solution, what I did, I add it in css page, then inspect the element. For example : for * background: linear-gradient(to right, #000 0%, #000 50%, #fff 50% #fff 100%)*; if you inspect it using inspect element, you will find : -webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff)) . So just add this last line in the inline style of your react compenent:

<div className="card" style={{background:"-webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff))"}}/>

for my example, I used this one above instead of : 

<div className="card" style={{background: linear-gradient(to right, #000 0%,  #000 50%, #fff 50% #fff 100%)"}}/>

So in conclusion, add this to a css file, it will work, see the output in the "inspect element", and use it and edit it as you like in the inline style of your react js component.

Upvotes: 2

MohamadReza Davoudi
MohamadReza Davoudi

Reputation: 260

use this code:

backgroundImage: "linear-gradient(to right, #4880EC, #019CAD)"

Upvotes: 17

Ramin Roshan
Ramin Roshan

Reputation: 536

I do not think you've written your code correctly. See examples of this site examples

<div className="card" style={{background: "linear-gradient(#e66465, #9198e5);" }}>sada</div>

Upvotes: 33

E McG
E McG

Reputation: 289

I believe for gradient backgrounds you must use the background-image property. So it should look something like this. You also have a typo with Transparent.

 <div className="card" style="background-image:linear-gradient(to bottom, Transparent 0%,Transparent 50%,red 50%,red 100%)"></div>

Upvotes: -2

lipp
lipp

Reputation: 5926

You misspelled transparent with Transparente. This works: linear-gradient(to bottom, transparent 0%,transparent 50%,red 50%,red 100%)

Upvotes: 0

Related Questions