How to make a gradient background in React with single color?

Question

I want to make a Gradient Background for a Component in React like shown in the image below

Gradient of the same colour

I want to do it like: <Box colour ="blue"></Box> where the styles for these components will be like

backgroundColor="this.props.colour"

now I just want to pass the colour prop, I don't want to pass two colours also the colour will be in hex code.

Answer 1

Why you don't use the gradient as a layer above the background-color to achieve this:

.box{
  height:200px;
  width:200px;
  background:linear-gradient(rgba(250,0,0,0.5),transparent);
  background-color:orange /*this your primary color*/
}

<div class="box">
</div>