Gradients and Duotone in WordPress: Useful or Decorative?

A gradient blends multiple colours across a background. Duotone remaps image shadows and highlights.

They solve different visual problems. Neither effect automatically improves meaning, accessibility, or conversion.

Use theme presets, test final contrast, and preserve clear unstyled content. Plain colour often wins.

Compare gradients and duotone

• Gradients create colour transitions on backgrounds.
• Duotone applies a two-colour filter to imagery.
• Gradients affect the painted surface behind content.
• Duotone changes an image’s rendered tonal mapping.
• Both can come from theme presets.
• Both require final contrast testing.

Do not use the terms interchangeably. Their controls, output, and failure cases differ.

Understand gradients

A CSS gradient creates a generated image from colour stops. It does not require a bitmap file.

Linear gradients follow a direction. Radial gradients spread from a centre or focal region.

Theme presets can provide reviewed gradients. Custom controls may allow editors to create new combinations.

Understand duotone

Duotone maps dark and light image regions toward two selected colours. Midtones blend between them.

The original Media Library file remains available. The block applies a rendered filter effect.

The official filters guide documents Image, Cover, and Gallery support. Theme options can vary.

Understand theme presets

Themes can register gradients and duotone choices through theme.json. WordPress generates reusable preset values.

The WordPress colour guide documents both preset types. Themes can also control custom selection.

Preset availability does not guarantee every combination fits every block. Editors still need judgement.

First understand how theme colour palettes affect blocks.

Apply a gradient background

1. Select a supported block.
2. Open the Styles sidebar.
3. Open the Colour panel.
4. Choose Background or Gradient.
5. Select a theme preset.
6. Add content only after checking contrast.
7. Preview narrow and wide layouts.

Controls vary by block and theme. Group, Cover, Buttons, and other blocks may expose different targets.

Apply a duotone filter

1. Select an Image, Cover, or supported Gallery.
2. Open the Styles or toolbar filter control.
3. Choose a theme duotone preset.
4. Inspect shadows, highlights, and focal detail.
5. Check nearby text contrast.
6. Preview the public page.
7. Reset the filter when meaning weakens.

The Image block guide documents its duotone control. Available presets depend on the active theme.

Use gradients for subtle depth

A restrained gradient can separate a hero, callout, or section. The transition should support hierarchy.

Nearby colours usually produce calmer results. Distant saturated colours create more visual movement.

Use one primary direction consistently. Random angles make repeated sections feel unrelated.

Use gradients to guide attention

A lighter or brighter region can attract attention. Place important content there only after testing contrast.

Do not point every gradient toward a button. Repeated visual pressure becomes noise.

Hierarchy should survive without the effect. Headings, order, and spacing still carry meaning.

Use duotone for coherent editorial imagery

Duotone can unify photographs from different sources. A shared preset creates a consistent visual treatment.

This works best when exact natural colour carries little meaning. Portraits and textures can suit it.

Keep source images strong without the filter. Effects should not rescue poor composition or resolution.

Avoid duotone on colour-critical images

Product colours, maps, charts, medical imagery, and status screenshots may require accurate colour.

A two-colour mapping can remove distinctions readers need. Use the original image in those cases.

Do not filter evidence purely for brand consistency. Meaning outranks decorative cohesion.

Avoid gradients behind long text

Text crosses several background values across a gradient. One colour choice may not contrast everywhere.

Long paragraphs expand that risk. Use a solid inner surface or simpler background.

Measure the weakest region, not the average. Readers encounter every line position.

Check contrast across the entire effect

Test text at every gradient stop and image region. Cropping can move difficult areas behind content.

Buttons need default, hover, focus, and disabled contrast. One static screenshot proves only one state.

Add an overlay when necessary, but test its final composite colour. Opacity changes the calculation.

Do not convey meaning through colour alone

A gradient direction should not be the only process indicator. Duotone colours should not identify categories alone.

Add labels, structure, icons, or patterns. Those signals survive colour-perception differences and monochrome output.

Protect image meaning

Duotone changes appearance, not alternative text requirements. Describe meaningful image content in its current context.

Do not mention decorative filter colours in alternative text. Describe information the image communicates.

Leave decorative image alternatives empty. The filter does not make decoration informative.

Check image crops after duotone

Cover and Gallery crops can change visible tonal ranges. The filter may look different at each width.

Set focal points where supported. Keep important subjects inside every expected crop.

Test portrait and landscape orientations. Mobile crops often expose different highlights.

Use presets instead of endless custom effects

Theme presets provide reviewed combinations and stable identifiers. Editors can reuse them consistently.

Custom gradients and duotones can serve campaign exceptions. Repeated values belong in the theme system.

Keep the preset list small. Every swatch appears approved, even without documentation.

Name presets by role

Names like Hero Wash or Editorial Portrait explain intended use. Names like Gradient Seven do not.

Technical teams may prefer systematic scale names. Choose one naming convention and document it.

Stable slugs matter more than display names. Existing blocks reference those technical identifiers.

Use Global Styles cautiously

Global Styles can apply filters or background treatments broadly. One change may alter existing and new blocks.

Preview varied imagery before setting a global duotone. Different tonal distributions produce different results.

Preview templates and patterns before setting global gradients. Shared defaults reach unexpected sections.

Reset a gradient

1. Save a revision.
2. Select the affected block.
3. Open its background colour control.
4. Use Clear or Reset.
5. Confirm the inherited background.
6. Preview the frontend.

Check text colours afterward. A removed dark background may leave inappropriate light text.

Reset duotone

1. Select the affected image block.
2. Open Filters or Duotone.
3. Choose Reset all or Clear.
4. Inspect the original image colours.
5. Recheck nearby text contrast.
6. Preview every relevant crop.

The official Filters settings provide reset controls. Theme or plugin interfaces may label them differently.

Diagnose missing effect controls

1. Select the supported parent block.
2. Open its Styles controls.
3. Confirm block support.
4. Review theme colour settings.
5. Check editor restrictions.
6. Test the active theme on staging.
7. Review plugin documentation where relevant.

The theme can disable custom effects while retaining presets. That may be intentional governance.

Diagnose editor and frontend differences

Check saved block attributes, preset slugs, generated styles, and public computed output.

Caching or optimisation can delay CSS changes. Clear only relevant layers after recording evidence.

Theme or plugin CSS may override background presentation. Change the winning owner, not another random layer.

Consider performance honestly

CSS gradients avoid separate background image downloads. Complexity can still increase rendering work.

Duotone does not reduce source image file size. Optimise, size, and deliver images appropriately.

Measure production pages with real media. Decorative restraint often improves clarity and rendering together.

Consider print and forced colours

Printed gradients can consume ink and reduce clarity. Provide suitable print styles for important documents.

Forced-colour modes may replace visual treatments. Meaning must remain available through structure and text.

Test content without background effects. The underlying page should remain coherent.

Build reviewed effects into patterns

Patterns can preserve approved gradients, overlays, text colours, padding, and constrained content.

Use replaceable media with documented tonal guidance. Any image will not produce the same result.

Lock fragile styling where appropriate. Editors still need alternative text and focal-point control.

Choose linear gradients deliberately

A linear gradient follows a straight axis. Direction determines where each colour appears behind content.

Use consistent angles across related components. Slight random changes make the system feel accidental.

Check right-to-left layouts when direction carries visual meaning. Reading flow may change the preferred axis.

Choose radial gradients deliberately

A radial gradient spreads from a chosen origin. It can create a restrained spotlight effect.

Keep the origin connected to meaningful content. Responsive cropping or wrapping can move that content.

Test tall and wide containers. One centre position rarely fits every aspect ratio.

Control colour stops

Stops define where gradient colours begin, mix, or end. Closely placed stops create sharper transitions.

Sharp transitions can behave like decorative bands. Ensure they do not cross important text unpredictably.

Theme presets preserve reviewed stop positions. Custom controls require equivalent testing.

Watch for gradient banding

Subtle gradients can show visible colour bands on some displays or compressed screenshots.

Test common devices and exported representations. A smooth design canvas cannot prove every output.

Simplify the transition when banding distracts. Adding complexity is not always the correct repair.

Avoid animated gradients without purpose

Core gradient controls create static backgrounds. Custom CSS can animate them, adding motion and rendering cost.

Animation needs a communication reason and reduced-motion behaviour. Decorative motion can distract or nauseate.

Static colour remains the safer weak case. Do not animate solely because custom CSS permits it.

Use duotone across galleries carefully

A shared duotone can unify a Gallery. Individual source images may have very different tonal ranges.

Review every image after applying the filter. Dark photographs can lose subjects or detail.

Captions and image order still carry meaning. Visual cohesion should not flatten useful distinctions.

Handle logos and illustrations separately

Logos often have protected brand colours. Duotone can violate recognition or partner usage rules.

Flat illustrations may contain semantic colour coding. Test whether remapping preserves those distinctions.

Use an approved monochrome asset when available. A designed source usually outperforms an improvised filter.

Prepare for theme changes

A new theme can register different gradient and duotone presets. Existing preset references may render differently.

Inventory effects before switching. Include Global Styles, patterns, Cover blocks, Images, and Galleries.

Map presets by communication role, not nearest colour. Test every affected block on staging.

Audit effect usage across content

Count preset and custom gradients, duotones, and filtered media. Group them by actual purpose.

Repeated custom combinations may deserve presets. Rare effects may deserve removal rather than formalisation.

Keep screenshots before cleanup. Reviewers need evidence when visual treatments change.

Review effects after content replacement

A replacement image brings different shadows, highlights, crops, and focal subjects. The old duotone may fail.

Longer text can cross new gradient regions. Buttons may move onto weaker contrast.

Treat every replacement as a fresh composition check. Preserved settings do not prove preserved quality.

Approve effects with evidence

Capture every relevant crop, viewport, and content state. Include unfiltered source images for comparison.

Record contrast measurements at the weakest regions. Average background values can conceal local failure.

Ask whether the effect improves hierarchy, cohesion, or attention. Remove it when reviewers cannot name value.

Check printing, forced colours, reduced motion, and browser zoom. Decorative output must not carry essential meaning.

Retest after theme or media changes. Preset names can survive while the composition stops working.

Keep approved examples with difficult images and long text. They provide useful regression coverage.

Record reset instructions beside each pattern. Editors should be able to remove effects safely.

Include edge cases with pale photographs, dark screenshots, logos, and translated headings.

Test every change again.

Gradients and duotone checklist

1. Name the effect’s communication purpose.
2. Choose gradient or duotone correctly.
3. Prefer reviewed theme presets.
4. Protect image meaning.
5. Test every text position.
6. Test interaction states.
7. Avoid colour-only meaning.
8. Check crops and focal points.
9. Optimise source images separately.
10. Test mobile and zoom.
11. Provide suitable print behaviour.
12. Reset effects that add no value.

Frequently asked questions

The verdict

Specialist blocks should inherit reviewed effects without hiding their meaning. Test free plugins first. Then compare the $299 lifetime suite when several Pro blocks fit maintained pages.