dawn: calling color background variable in css

[SpotterJ]

I'm trying to figure out how to call the color variable from theme settings in css as section backgrounds, not sure what and how to target them. 

[SpotterJ]

.collection, .video-section, .collage-wrapper {
	background-color: rgba(var(--color-background), .8)!important;
}

Now, how do I call the gradient?

[Savior · Accepted solution]

@SpotterJ 

Hello

If you have added the settings for color in Theme Settings like below:

{
"type": "color",
"id": "color_id",
"label": "Add Color"
}

then you can access it like this: 

.collection, .video-section, .collage-wrapper {
	background-color: {{ settings.color_id }} !important;
}

Here 'color_id' is the ID of color setting.

---

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

[SpotterJ]

Beautiful, thank you.

[slangww]

<style>

.accent-background {
width: 100%;
height: 200px;
background: var(--section-accent-background);
}

--section-accent-background: {{ section.settings.accent_background }};

</style>

<section>

    <div class="accent-background">

       Hello World

  </div>

</section>

{% schema %}

{
"type": "color_background",
"id": "accent_background",
"default": "linear-gradient(#F5B901, #EE8008, #E53C10)",
"label": "Accent background"
}

{% endschema %}

You can also use Radial, Conic instead of Linear.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients