Solved

How can I create a red gradient effect using CSS?

GustavoAlves
Excursionist
37 0 2

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

 

 

 

GustavoAlves_0-1671485922744.png

 

Accepted Solutions (3)

NiccosMedia
Shopify Partner
51 4 13

This is an 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 #

Greetings Niclas
Senior Front-End Developer
Founder of Niccos Media
Based in Germany
kontakt@niccos-media.de

View solution in original post

Kani
Shopify Partner
468 125 225

This is an accepted solution.

Hi @GustavoAlves 

 

Kani_0-1671502431928.png

 

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;
}

 

 

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

View solution in original post

GemPages
Shopify Partner
5589 1261 1217

This is an 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

GemPages_0-1671503010505.png


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,

GemPages_1-1671503337171.png

 

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

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 3 (3)

NiccosMedia
Shopify Partner
51 4 13

This is an 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 #

Greetings Niclas
Senior Front-End Developer
Founder of Niccos Media
Based in Germany
kontakt@niccos-media.de

Kani
Shopify Partner
468 125 225

This is an accepted solution.

Hi @GustavoAlves 

 

Kani_0-1671502431928.png

 

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;
}

 

 

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂

GemPages
Shopify Partner
5589 1261 1217

This is an 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

GemPages_0-1671503010505.png


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,

GemPages_1-1671503337171.png

 

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

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center