Gradient surface

Blend two or more colors across a surface.

Live preview Try the effect

DESIGN SYSTEM

Good design
makes content clearer.

Focus on content, hierarchy and thoughtful details.

Explore design

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Blend two or more colors across a surface. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Accent backgrounds and highlighted areas.

Related concepts

A gradient is a color treatment, not a structural layout pattern.

Describe this effect

Output language

Apply a restrained gradient between compatible colors while maintaining text contrast.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.