How to apply a linear gradient background on a single page

Store Design
1

Hi everyone,

I’d like to add a simple linear gradient background to one specific page of my Shopify store.

Here’s the CSS I generated with CSS Gradient:

background: #608989;
background: linear-gradient(180deg, rgba(96, 137, 137, 1) 0%, rgba(255, 255, 255, 1) 10%);

I’m not sure where exactly I should place this code in Shopify (I’m using the Dawn theme).

Any help or step-by-step instructions would be greatly appreciated.

Thanks in advance!

2

Hi @Nooaah

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find your Dawn theme and click on “Customize”.

  3. In the theme editor, on the left-hand side, click on “Theme settings” (the paintbrush icon).

  4. Under “Theme settings,” you will find a “Custom CSS” option. Click on it

  5. In the “Custom CSS” field, you will add your CSS code. You will need to combine the page identifier you found in Step 1 with the CSS you generated.

Here is the code you should paste. Be sure to replace .template-page with the specific class you found for your page:

body.template-page {
  background: #608989;
  background: linear-gradient(180deg, rgba(96, 137, 137, 1) 0%, rgba(255, 255, 255, 1) 10%);
}

Click Save.

Now, when you visit that specific page on your store, it should have the linear gradient background.

Let me know if there’s any other issue, I’m here to help. And if it works, please mark my comment as the solution

Thank You!

3

Hi @Nooaah

Great — you can add that gradient to one specific page in a few safe ways. I’ll give three practical options (quick → more “proper”), with exact code you can copy/paste.

Your gradient:

background: linear-gradient(180deg, rgba(96,137,137,1) 0%, rgba(255,255,255,1) 10%);

Option A — Quick & easiest: paste CSS inside the page content (no theme code edit)

  1. In Shopify admin go to Online Store → Pages and open the page you want to style.
  2. Switch the editor to HTML / source mode (click the <> or HTML button).
  3. At the top of the page content paste:
<style>
  .page-specific-gradient {
    min-height: 100vh; /* optional, adjust as needed */
    background: linear-gradient(180deg, rgba(96,137,137,1) 0%, rgba(255,255,255,1) 10%);
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

<div class="page-specific-gradient">
  <!-- If you want existing page content to be inside this area, move the content here -->
</div>
  1. Save and preview the page.

Pros: instant, no theme file editing.
Cons: limited control if your theme wraps content with other containers — you may need to move or wrap content inside the <div>.

Option B — Recommended: conditional CSS in the page template (keeps styling in theme files)

This is cleaner and keeps styles inside the theme.

  1. Open Online Store → Themes → Actions → Edit code.
  2. Find the section file that renders pages (commonly sections/main-page.liquid or sections/page-template.liquid — it depends on your theme). If you’re unsure which, you can edit the page template itself (see template files under templates/ like templates/page.contact.json / templates/page.json).
  3. Add this Liquid + CSS snippet near the top of the section or template (inside <head>-level area is not required — placing it inside the section is fine):
{% if page.handle == 'about' %}
  <style>
    /* scope to the page container used by your theme (adjust selector if needed) */
    .page-width, .section {
      background: linear-gradient(180deg, rgba(96,137,137,1) 0%, rgba(255,255,255,1) 10%) !important;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
{% endif %}

Replace 'about' with the page handle (the URL part after /pages/). Example: for /pages/contact-us use 'contact-us'.

Pros: theme-level control, no messy inline HTML.
Cons: you need to be careful to pick the correct theme file and selector — .page-width is a common wrapper in Dawn; you may need to tweak the selector to the exact wrapper your theme uses.

Option C — Create a custom page template and add a class selector (most robust)

  1. In Edit code → templates/ click Add a new template → Choose page and give it a name (e.g. gradient). This creates templates/page.gradient.json.
  2. Edit that new template (or its main section) and add a wrapper class, or in the section used by the template set a CSS class like page-gradient.
  3. Add CSS (in assets/base.css or theme stylesheet) targeting that class:
.page-gradient .page-width {
  background: linear-gradient(180deg, rgba(96,137,137,1) 0%, rgba(255,255,255,1) 10%);
  background-repeat: no-repeat;
  background-size: cover;
}
  1. In Shopify admin → Pages → open the page → on the right choose Theme template → select page.gradient.

Pros: clean, reusable, best practice for production.
Cons: involves creating a template but still straightforward.