Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inline style in react background: linear-gradient

Tags:

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.

like image 987
yehudit Greenwald Avatar asked Oct 23 '18 13:10

yehudit Greenwald


People also ask

How do you apply a linear gradient to a background image in react?

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.

Does linear gradient work with background color?

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.

How you define the function in CSS image for a linear gradient?

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, ... )


Video Answer


2 Answers

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> 
like image 137
Ramin Roshan Avatar answered Sep 20 '22 14:09

Ramin Roshan


use this code:

backgroundImage: "linear-gradient(to right, #4880EC, #019CAD)" 
like image 29
MohamadReza Davoudi Avatar answered Sep 20 '22 14:09

MohamadReza Davoudi