Goal: achieve a full-page gradient background in the Shopify Dawn theme that doesn’t restart in each section and doesn’t rely on an uploaded image.
Key approach: apply the gradient via CSS to the body (global page background). Initial attempts editing base.css didn’t work until sections were set to transparent, allowing the body gradient to show continuously across the page.
Clarifications: Dawn is a Shopify theme; base.css is the theme’s main stylesheet. No store URL was provided; no code samples were shared.
Outcome: partial resolution. The continuous gradient effect was achieved by making sections transparent over a body-level gradient.
Open question: how to animate the gradient (a “moving” gradient), with a reference to gradient-animator.com. No implementation guidance for animation was provided yet.
Status: ongoing, pending examples or CSS for animated gradients (e.g., keyframes/transition techniques).
Hi,
I would like to have a gradient in Shopify Dawn as a background image without having it starting again in each section. When I add a gradient to let’s say background one it fills each part of the page with the gradient, but I would like the whole body as a gradient without having to upload a background image.
Is that possible?
Thanks!
Hey Mike,
I don’t have a store I was just trying things out with Dawn backgrounds and was wondering if the gradient background can be the whole body background, not just sections.
So you can add CSS code to affect for whole body background
I tried things out and added code to the base.css but wasn’t successful. Any idea where I can find an example code for that? That would be amazing!
I think I found it. I needed to set the sections on transparent.
Any idea how to get it moving? Like this one: