How can I create a red gradient effect using CSS?

[GustavoAlves]

How can I transform a place that is in red in a gradient?? In this case using css, because my theme does not allow it.
website: www.colorluzes.com.br

[NiccosMedia · Accepted solution]

@GustavoAlves 

.featured-collection.lazyloaded {
background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);;
}

You can add it in the custom.css folder if you have one otherwise in the theme.css at the bottom

Then you can just edit the different color codes starting with #

[Kani · Accepted solution]

Hi @GustavoAlves 

1: Online store > themes > Actions > Edit code > Assets > theme.css

2: paste at last

#shopify-section-c6f729e1-f8da-43b8-9c61-70b84fa71cce .featured-collection {
    background-image: linear-gradient(to right, #4900a3, #fc168d);
    background-size: 100%;
    background-position: unset;
}

[NiccosMedia · Accepted solution]

@GustavoAlves 

.featured-collection.lazyloaded {
background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);;
}

You can add it in the custom.css folder if you have one otherwise in the theme.css at the bottom

Then you can just edit the different color codes starting with #

[Kani · Accepted solution]

Hi @GustavoAlves 

1: Online store > themes > Actions > Edit code > Assets > theme.css

2: paste at last

#shopify-section-c6f729e1-f8da-43b8-9c61-70b84fa71cce .featured-collection {
    background-image: linear-gradient(to right, #4900a3, #fc168d);
    background-size: 100%;
    background-position: unset;
}

[GemPages · Accepted solution]

Hello @GustavoAlves ,

It's GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
section[data-section-type="featured-collection"] .featured-collection {
 background-image: linear-gradient(to right, #4900a3, #fc168d) !important;
 background-size: 100%;
 background-position: center;
}
</style>

For example,

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team