CSS-Verläufe, Schatten und runde Ecken: Ein visueller Leitfaden

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: 0deg von unten nach oben, 90deg von links nach rechts, 180deg von 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.

Unser CSS-Generator schreibt den Winkel ausdrücklich hin — die Standardausgabe lautet background: linear-gradient(90deg, #3388cc, #8833cc); und nicht die kürzere Form ohne Winkel. Das ist Absicht: linear-gradient(#3388cc, #8833cc) ist zulässig und verläuft standardmäßig von oben nach unten, aber wer dein Stylesheet liest, kann nicht erkennen, ob du das so wolltest oder es vergessen hast.

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 inset ergibt 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.

Lohnt den Vergleich mit dem, was der Generator wirklich liefert: box-shadow: 5px 5px 15px 0px #000000;. Zwei Unterschiede zum Beispiel oben. Er schreibt den Spread immer mit, auch wenn er 0px ist — so stehen die vier Längen beim späteren Bearbeiten untereinander. Und die Farbe kommt als Hex-Wert, ist also vollständig deckend. Das Erste, was man in einem echten Design ändert, ist deshalb meist dieses #000000, ersetzt durch ein rgba() mit niedrigem Alpha. Der Generator gibt dir eine korrekte Deklaration, keine geschmackvolle.

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.

Unser Generator schreibt stets die Langform: border-radius: 20px 20px 20px 20px;, selbst wenn alle vier Ecken gleich sind. Wortreich, aber du kannst eine einzelne Ecke ändern, ohne vorher zu ermitteln, welche Position der Kurzschreibweise sie einnimmt — der häufigste Weg, wie ein handgeändertes border-radius schiefgeht. 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; schreibe 90deg oder ein Keyword wie to right.
• Reinschwarze Schatten. rgba(0,0,0,1) sieht aus wie ein ausgeschnittener Aufkleber. Echte Schatten haben geringe Deckkraft und weiche Kanten.
• overflow: hidden soll den Schatten kappen. box-shadow wird außerhalb der Box gezeichnet und ignoriert das overflow desselben 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.