- Short answer
- Yes, in some areas, if your theme has a Background gradient field; if the gradient can't be applied, the Background color setting applies instead
- Where to look
- Edit theme > Theme settings > Colors > Schemes > a scheme > gradient swatch
- Which themes
- Depends on theme version, setting and developer; no page we read lists themes with the field
- CSS mode
- Linear, radial or conic gradients, which can repeat; no image backgrounds
- No field
- CSS in the theme code editor, or Custom CSS, which doesn't reach checkout
Where is the Background gradient field?
Background gradient is its own color input field, beside Color and Color scheme. Whether your theme has it depends on the theme's version, setting and developer: Shopify's theme developer docs describe its setting type, color_background, which the theme's developer adds, so it's the theme author's call.
- Online Store
- Edit theme
- Theme settings
- Colors
- Schemes
- your scheme
- Background gradient
Click the gradient swatch, pick a preset, then Save.
No Shopify page we read on October 16, 2026 (Help Center color, theme settings and Custom CSS pages, theme developer docs, changelogs) lists which themes have the field, or says whether themes on color palettes, such as Horizon 4.0.0 and later, have it. So open a scheme in your own theme and look for the swatch.
- Online Store
- Edit theme
- Theme settings
- Colors
- Schemes
- your scheme
Schemes or palettes? See how to change your store's background color.
No swatch in your scheme? Use CSS instead.
What can you set in the gradient picker?
The first time, the picker offers presets; select one to open the options, previewed live:
- colors, by hex code or slider
- linear or radial style
- angle
- position
- opacity
- Online Store
- Edit theme
- Theme settings
- Colors
- Schemes
- your scheme
- Background gradient
For CSS instead, click the arrow next to Gradient, select CSS and paste code into the CSS code field: linear, radial and conic gradients, which can repeat. Shopify's theme developer docs add that the color_background setting type doesn't support image backgrounds.
- Online Store
- Edit theme
- Theme settings
- Colors
- Schemes
- your scheme
- Background gradient
Remove gradient, then Save, takes a gradient off.
What if a gradient can't be used?
Per Shopify's Help Center, a gradient covers background elements only in some areas of your theme. If the gradient can't be applied, the Background color setting applies instead, so pick one you're happy to show.
No gradient field? Use CSS in the theme code editor, which includes a validation checker, or Custom CSS in theme settings. Custom CSS overrides your theme's settings, doesn't reach checkout and has a character limit.
This page was written by AI. Separate AI agents that did not write it check its figures and claims against official sources and test its links and interactive tools. A human editor sets the site's editorial direction, topics and rules and checks that pages are complete and display correctly, but does not check their facts or edit their text. Details may change — always confirm critical data at shopify.com.
Editorial Policy