Ratgeber
So erstellst du einen einfachen CSS-Verlaufshintergrund
Erstelle einen klaren Zwei-Farben-Verlauf mit schnellen Checks für Lesbarkeit und Balance.
Einfache Verläufe funktionieren oft besser, weil sie Inhalte unterstützen statt Aufmerksamkeit zu stehlen.
Begin with two related colors
Pick colors from the same family or nearby hues.
This keeps transitions smooth and avoids harsh banding.
Use a neutral default angle
90° or 120° works well for many section backgrounds.
Change the angle only when layout direction requires it.
Test with real content early
Place heading text and a button over the gradient.
If contrast is weak, darken one stop slightly or add a subtle overlay.
Save the final CSS snippet
Copy the final gradient code into your stylesheet or token file.
Documenting the decision prevents random variations later.
Where this helps
- Hero sections for small websites.
- Promo cards and newsletter blocks.
- Page sections that need light visual separation.
Simple usually scales better
A calm two-color gradient is easier to maintain and more reusable across future pages.