Inline style in react background: linear-gradient

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>

use this code:

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

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.

Used like this with a variables

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

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.

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>

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.

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)));

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

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

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

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>