How can i add linear gradient in css/react?-CodePudding

How can i add three diagonal gradients on this section with the first gradient top left and the rest succeeding the next?

<section id='product'>

                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-md-8 mt-5">
                            <h1 className="display-4 fw-bolder mb-4 text-center text-white" style={{fontFamily: "Brush Script MT, Brush Script Std, cursive",display: 'flex',  justifyContent:'center', alignItems:'center', height: '45vh'}}>Coming Soon</h1>
                            {/* <p className="lead text-center fs-4 mb-5 text-white" style={}  >Coming Soon</p> */}
                            <div className='buttons d-flex justify-content-center'>
                                {/* <button className='btn btn-outline-primary rounded-pill px-4 py-2 ms-2'>Learn More</button>
                        <button className='btn btn-outline-primary rounded-pill px-4 py-2 ms-2'>Buy Now</button> */}
                            </div>
                        </div>
                    </div>
                </div>

            </section>

css :

#product{
  background: #00FFFF;
  background:
    linear-gradient(118deg,#0000FF .001%,#00FFFF 100%);

  min-height: 500px;

}

CodePudding user response：

I would suggest using rgba or hsl when working with opacity. simply added three colors and defining the direction with to right bottom

#product {
  background: #00FFFF;
  background: linear-gradient(to right bottom, rgba(0, 0, 255, 0.8), rgba(0, 255, 255, 0.7), rgba(255, 0, 255, 0.4));
  min-height: 500px;
}

<section id='product'></section>

CodePudding user response：

You can use CSS to do it. In this link you have all the knowledge for linear-gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient