Verläufe, Schatten und runde Ecken gehören zu den meistgenutzten CSS-Effekten — und zu den fummeligsten, die man von Hand schreibt. Die Syntax ist nicht schwer; das Problem ist, dass man sich das Ergebnis aus den Zahlen nicht vorstellen kann und deshalb ewig justiert, speichert, neu lädt und wieder justiert. Hier ist, was jeder wirklich tut.
Verläufe: linear-gradient und radial-gradient
Ein Verlauf ist ein weicher Übergang zwischen Farben, genutzt als background.
background: linear-gradient(90deg, #3388cc, #8833cc);
background: radial-gradient(circle, #3388cc, #8833cc);- Linear verläuft entlang eines Winkels:
0degvon unten nach oben,90degvon links nach rechts,180degvon oben nach unten. - Radial breitet sich kreisförmig vom Zentrum aus. Der Winkel gilt nicht.
- Mit weiteren Farbstopps (
#a, #b, #c) baust du mehrfarbige Verläufe.
Box-Shadow: fünf Zahlen und eine Farbe
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.3);Der Reihe nach: Versatz-X, Versatz-Y, Weichzeichnen, Ausbreitung, Farbe.
- Versätze verschieben den Schatten — positives x/y drückt ihn nach rechts unten, was wie Licht von oben links wirkt.
- Weichzeichnen macht die Kante weicher; höher = weicher.
- Ausbreitung vergrößert oder verkleinert den Schatten vor dem Weichzeichnen.
- Ein vorangestelltes
insetergibt einen inneren Schatten (eingedrückter Look).
Ein dezenter, glaubwürdiger Schatten heißt meist kleine Versätze, moderates Weichzeichnen und eine Farbe mit geringer Deckkraft — nicht reines Schwarz.
Border-Radius: eine Eigenschaft, vier Ecken
border-radius: 20px; /* alle Ecken */
border-radius: 20px 40px 20px 40px; /* OL OR UR UL */Ein Wert rundet alles gleich; vier Werte setzen jede Ecke im Uhrzeigersinn ab oben links. Ein border-radius von der halben Boxhöhe ergibt eine Pillenform; die halbe Seitenlänge eines Quadrats ergibt einen Kreis.
Visuell bauen
Diese Zahlen zu raten ist langsam. Der CSS-Generator bietet Schieberegler und Farbwähler mit Live-Vorschau für alle drei — Verlauf, box-shadow und border-radius — und kopiert sauberes CSS, wenn es passt.
Verwandte Tools
- Eine Farbe zwischen HEX, RGB und HSL umrechnen? Nutze den Farb-Konverter.
Rezepte zum Kopieren
Diese Snippets decken die meisten Alltagsfälle ab — einfügen und die Zahlen nach Geschmack anpassen.
/* Karte leicht anheben */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
/* Weich schwebendes Panel */
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
/* Diagonaler Markenverlauf */
background: linear-gradient(135deg, #6366f1, #8b5cf6);
/* Pillenförmiger Button */
border-radius: 9999px;Zwei gestapelte Schatten — einer eng, einer weiter und weicher — wirken glaubwürdiger als ein einzelner großer Weichzeichner.
Häufige Fehler
- Winkel ohne Einheit.
linear-gradient(90, …)ist ungültig; schreibe90degoder ein Keyword wieto right. - Reinschwarze Schatten.
rgba(0,0,0,1)sieht aus wie ein ausgeschnittener Aufkleber. Echte Schatten haben geringe Deckkraft und weiche Kanten. overflow: hiddensoll den Schatten kappen.box-shadowwird außerhalb der Box gezeichnet und ignoriert dasoverflowdesselben Elements.- Eine Ecke „runder” machen wollen. Ein
border-radiusüber der halben kürzeren Seite läuft einfach in eine volle Pille oder einen Kreis — mehr Rundung geht nicht.
FAQ
Kann ich einen Verlauf animieren?
Die Farbstopps selbst nicht — CSS kann background-image nicht interpolieren. Animiere stattdessen eine größere background-size und verschiebe background-position, oder blende zwei gestapelte Ebenen über.
Warum ist mein Schatten unsichtbar?
Fast immer Versatz und Weichzeichnen bei 0 oder eine völlig transparente Farbe. Gib ihm einen kleinen Versatz und eine Alpha um 0.2.
Brauchen diese Vendor-Präfixe?
Nein. linear-gradient, box-shadow und border-radius funktionieren in jedem aktuellen Browser ohne Präfix.
Steht die Palette, halte jede Farbe in einer Notation fest, damit nichts durcheinandergerät — siehe HEX, RGB und HSL erklärt — oder greif einen Startton direkt aus dem Mockup mit dem Bild-Farbwähler.