I'm trying to create a card with a gradient background color.
Expected: I want the background color to be a gradient (like the green color behind the image) https://i.sstatic.net/ujiuz.png
Actual: Currently, the background color is not a gradient and only accepts one color (no gradient) https://i.sstatic.net/1UNJ5.png
The specific gradient I want is
linear-gradient(300deg, #6DBF67 1.06%, #A8DAA4 100%)Here is the code snippet I am using:
.App {
font-family: sans-serif;
text-align: center;
}
// Rest of the CSS...
}<div className="container">
<div className="flex">
<div className="section-left">
<div className="wrapper-img">
<img src="https://d3hi9gzi0oybee.cloudfront.net/assets/e-commerce/icons/ic-otten-point.svg" width="21px" height="21px" />
</div>
</div>
<div className="section-right">
<div className="flex-sb">
<h4 className="title">Title</h4>
</div>
</div>
</div>
</div>You can view and experiment with my code in this sandbox: card-ticket. Thank you!