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.
To add a linear-gradient background in a React component, we can put the linear-gradient value in the style prop object. to set the background property to "linear-gradient(#e66465, #9198e5)" . Now we should see the linear gradient background on the div.
Because <gradient> s belong to the <image> data type, they can only be used where <image> s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.
The linear-gradient() function is an inbuilt function in CSS which is used to set the linear gradient as the background image. Syntax: background-image: linear-gradient( direction, color1, color2, ... )
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)"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With