Ratgeber
So nutzt du Verläufe, ohne die UI unruhig zu machen
Setze Verläufe zurückhaltend ein, damit Fokus, Klarheit und Lesbarkeit erhalten bleiben.
Verläufe können ein UI aufwerten, wirken bei zu hoher Intensität aber schnell überladen.
Start with one clear UI goal
Decide whether the gradient should separate sections, emphasize a block, or create depth.
One goal makes direction, colors, and intensity easier to control.
Choose two colors before adding complexity
Two stops are usually enough for clean interfaces.
Only add a third color if it solves a specific visual problem.
- Use nearby hues for subtle depth.
- Use stronger contrast only on focal sections.
- Check readability before locking colors.
Pick linear or radial based on layout shape
Linear gradients fit headers, cards, and directional flow.
Radial gradients fit spotlight-style emphasis behind one focal element.
Always validate with real text and components
Test the gradient behind real heading sizes, buttons, and cards.
If readability drops, reduce saturation or add a soft overlay.
Practical use cases
- Landing page hero backgrounds.
- Section dividers with subtle depth.
- CTA blocks that need clearer visual focus.
Use gradients as support, not decoration
Start with clarity, test quickly, then ship a gradient that helps the layout instead of competing with it.