How to Use CSS Gradients for Backgrounds in Shopify & GemPages

What Is a CSS Gradient?

A CSS gradient is a background style that transitions between two or more colors. Unlike traditional images, gradients are created with code—making them scalable, lightweight, and easily customizable.

There are three main types of CSS gradients:

• Linear gradients: Transition colors along a straight line (e.g., top to bottom or left to right).
  Example: linear-gradient(red, green)
• Radial gradients: Colors radiate outward from a center point.
  Example: radial-gradient(circle, blue, white)
• Conic gradients: Colors are rotated around a center point like a pie chart.
  Example: conic-gradient(from 90deg, red, yellow, green)

Recommended CSS Gradient Generators

These free tools make it easier:

• CSS Gradient – User-friendly interface for linear and radial gradients
• uiGradients– Beautiful, ready-to-use presets
• Coolors Gradient Generator – Ideal for brand palettes
• Gradient Hunt – Community-curated gradients

These generators offer visual previews and let you copy the CSS with a single click.

How to Set Up a Gradient Background in Shopify

Shopify themes now allow you to add gradients directly from the Theme Editor. Here’s how to do it using custom CSS:

Step 1: Go to Online Store > Themes in your Shopify admin.

Step 2: Click Customize next to the theme you want to edit.

Step 3: Click the Settings (gear icon) and then choose Colors.

Step 4: Under Schemes, click the scheme you want to edit.

Step 5: Select the gradient you’d like to modify.

Step 6: Click the arrow next to Gradient, then select CSS.

Step 7: Paste your gradient CSS code in the input field. 

Step 8: Click Save.

You’ll see the result in the theme editor preview. This approach works well for headers, banners, and even entire sections.

How to Add CSS Gradient Background in GemPages

GemPages offers native support for background customization, including static colors, gradients, and images. But if you want more control using custom CSS, here’s how:

Step 1: Right-click on the section where you want to apply a gradient.

Step 2: Select Custom Code from the context menu.

Step 3: In the CSS modal that appears, enter your custom CSS code. Example:

.gdXweR3hSd {

  background: linear-gradient(135deg, #f6d365, #fda085) !important;

}

Explanation:

.gdXweR3hSd

• This is a CSS class selector.
• It targets any element on your page that has the class name .gdXweR3hSd

background: linear-gradient(135deg, #f6d365, #fda085);

• This line applies a gradient background to the selected section.

Let’s break it further:

• background: is the CSS property used to set the background of an element.
• linear-gradient(…) is a function that creates a smooth transition between colors.
• 135deg: This means the gradient will flow diagonally—from the top-left corner to the bottom-right corner.
  • You can change this value to other angles like 90deg (left to right), 180deg (top to bottom), etc.
    
• #f6d365: This is the start color of the gradient.
• #fda085: This is the end color of the gradient.

Step 4: Click Save.