Pattern Overlays

Configure background patterns for different UI elements. Select patterns, adjust scale and opacity, then apply to your design system.

1 of 10 configured

Select Element

Choose which element to configure

Pattern Settings

Configure pattern for Card

Pattern Type

Scale1.0x

0.5x3x

Opacity10%

1%50%

Pattern Color

--pattern-card-type: none;
--pattern-card-scale: 1;
--pattern-card-opacity: 0.1;
--pattern-card-color: currentColor;

Pattern Types

Click to apply pattern to Card

Live Preview: Card

Preview the selected pattern with current settings

This is how the pattern will look applied to card elements in your design system.

Component Previews

See how patterns apply to actual components

Card

Card Title

Card description with pattern overlay applied.

Buttons

Input

Muted Background

This is a muted background section with pattern overlay.

Page Background

This pattern would be applied to the main page background.

All Configurations

Summary of all pattern settings