WordPress Gradient Background — How to Add CSS Gradients Without a Plugin

WordPress has multiple places where you can add gradient backgrounds — and which one to use depends on your theme, whether you are using the block editor or classic editor, and whether you want site-wide or block-level gradients. This guide covers every approach, no plugin required, with the free CSS gradient generator providing the values.

Gutenberg Block Editor: Built-In Gradient Background Controls

The WordPress block editor (Gutenberg) has native gradient support in block settings. No CSS needed for basic use:

1. Select a Cover block, Group block, or Column block
2. In the right panel, find Styles or Background
3. Switch from Solid Colour to Gradient
4. Choose a preset gradient or use the custom gradient picker

The built-in picker is limited — usually 6-8 preset gradients and a basic custom option. For precise colour control, custom angles, or conic gradients, you need to add custom CSS instead of using the built-in picker.

Adding Custom Gradient CSS in WordPress (Three Methods)

Method 1 — Customizer Additional CSS (simplest, no file editing):

Appearance > Customize > Additional CSS. Paste your gradient class:

.hero-section { background: linear-gradient(135deg, #7c3aed, #2563eb); }

Apply the class to a block using the Advanced > Additional CSS Class field in the block editor sidebar.

Method 2 — theme.json (block themes / Full Site Editing):

If your theme supports Full Site Editing, add custom gradient presets to theme.json under settings.color.gradients:

"gradients": [{ "slug": "brand-gradient", "gradient": "linear-gradient(135deg, #7c3aed, #2563eb)", "name": "Brand Gradient" }]

This makes the gradient available in the block editor colour picker throughout the site.

Method 3 — child theme stylesheet (classic themes):

Add the CSS to your child theme's style.css. Target the element you want to gradient — header, section, footer, or a specific container class — and apply the gradient property.

Sell Custom Apparel — We Handle Printing & Free Shipping

Getting the Right Gradient CSS Value (Free)

Open the free CSS gradient generator, build your gradient visually, and copy the output. The full linear-gradient() value pastes directly into any of the three WordPress methods above.

For Customizer CSS: paste as the value of your background property.
For theme.json: paste as the value of the "gradient" key (as a string).
For the block editor Additional CSS Class approach: create the class in Customizer CSS, then reference the class name in the block settings.

Gradient Backgrounds on Specific WordPress Page Sections

Hero / banner section: Use a Cover block with a custom gradient. Add the block, set gradient background, and place your headline inside it.

Full-width section background: Wrap content in a Group block, set the Group's background to your gradient. Use the "Full width" alignment option to make it span the full page width.

Footer gradient: Most themes have a footer background colour setting in the Customizer. If it only accepts solid colours, override it with Additional CSS: .site-footer { background: linear-gradient(to bottom, #1e1b4b, #0f172a) !important; }

Specific post or page: Use a page-specific class (WordPress adds a unique body class per page ID: .page-id-42) and target it in your CSS: .page-id-42 .hero { background: linear-gradient(...); }

Frequently Asked Questions

Do I need a plugin to add gradient backgrounds in WordPress?

No. Native Gutenberg supports basic gradients. For custom gradient CSS, the Customizer Additional CSS field handles it without any plugin.

Will my gradient CSS be lost if I update my theme?

CSS added in the Customizer Additional CSS field is stored in the database — it persists through theme updates. CSS added directly to a theme stylesheet will be overwritten on update. Use a child theme to prevent that.

Can I add an animated gradient background in WordPress?

Yes. Add both the gradient CSS and the keyframe animation in Additional CSS or your child theme stylesheet. The animation works the same in WordPress as in any HTML page.

Does this work with page builders like Elementor and Divi?

Elementor and Divi have their own gradient background controls in their section/row/column settings. For custom gradients beyond their pickers, paste the CSS value into their custom CSS field (available at section level in both builders).