Horizon theme background gradient effect

Store Design
, ,

Topic summary

A user wants to add a gradient background to their Shopify store using the Horizon theme.

Solution provided:
Multiple experts recommend adding custom CSS code to achieve this effect:

  • Navigate to Shopify Admin → Online Store → Themes → Edit Code → styles.css (or use the Custom CSS option in Theme Settings)
  • Add CSS targeting the body element with a linear-gradient property
  • Example code: body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important; }

Customization tips:

  • Use gradient generators like cssgradient.io to select custom color combinations
  • Adjust gradient angle (e.g., 135deg, 90deg) and hex color values to match desired design
  • May need to set section backgrounds to transparent to ensure gradient visibility throughout the page
  • Can target specific sections instead of entire body if gradient should only appear in certain areas

The discussion remains open with no confirmation from the original poster on implementation.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

I’m using horizon theme in that I want to make the background as gradient, how can I do it

website: https://firstdraftstudio.myshopify.com/

password: FD

2

Hey,

If you are looking to change the background of the whole body of your store then you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> styles.css

In the end of styles.css paste the following code below.

body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

You can change the gradient background values based on your selection.

If this was helpful don’t forget to like it and Mark as Solution.

Thanks

3

Hello @sivadarshan4331 ,

I hope you are well!

Basically, you can choose the hex color from the gradient generator by visiting - https://cssgradient.io/, copy the code and paste it to the top of the theme.css or base.css with the body tag. For example-
body{
background: #2A7B9B;
background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
}

This will change the gradient as per your requirement.

4

Hi @sivadarshan4331 ,
You can add a gradient background in the Horizon theme using a small piece of custom CSS. Here’s how:

  1. Go to your Shopify admin → Online Store > Themes.
  2. Click Customize on your active theme.
  3. In the left panel, click Theme settings > Custom CSS (or open Edit code if that option isn’t available).
  4. Add the following CSS:
/* Gradient background for the entire page */
body {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

/* Optional: ensure sections with white backgrounds become transparent */
.section, .main-content, .content-wrapper {
  background: transparent !important;
}

Tip:
You can adjust the gradient colors (#ff9a9e → #fad0c4) or the angle (135deg) to get the look you want.
If you only want the gradient on a specific section (like the hero or footer), target that section’s class instead of body.

If this helps you achieve the look you want, don’t forget to mark it as an Accepted Solution so others can find it too!