Tiefe mit CSS-Schatten gestalten
Was dieser Generator macht
CSS-Schatten gibt es in zwei Varianten. box-shadow zeichnet einen Schatten um den rechteckigen Rahmen eines Elements — ein div, einen Button oder eine Card — während text-shadow den Schatten hinter die einzelnen Buchstaben des Textes legt. Dieser Generator bietet für beide einen visuellen Editor: Über Schieberegler stellst du horizontalen und vertikalen Versatz, Weichzeichnung (Blur), Ausdehnung (Spread), Farbe und Deckkraft ein, und die Vorschau zeichnet sich neu, sobald sich ein Wert ändert. Passt das Ergebnis, steht das zugehörige CSS zum Kopieren bereit.
Statt Pixelwerte von Hand zu schätzen, formst du den Schatten an einer echten Box, einem Button, einer Card oder einer Überschrift und liest die exakte box-shadow- oder text-shadow-Deklaration ab.
Wann sich der Einsatz lohnt
Greif zu box-shadow, wenn ein Element von der Seite abgehoben wirken soll: die Material-artige Erhebung einer Card, ein sanft schwebendes Menü oder die eingedrückte Optik eines gedrückten Buttons. text-shadow ist das Werkzeug für Typografie: ein zarter Schatten, der eine Überschrift von einem unruhigen Hintergrund löst, oder ein farbiges Leuchten hinter einem Markennamen.
Es ist außerdem ein schneller Weg, ein bestehendes Design nachzubauen. Lade eine Voreinstellung wie Material, Raised, Floating oder Glow als Ausgangspunkt und justiere dann Versatz und Deckkraft, bis der Schatten zum Mock-up passt, an dem du dich orientierst.
Beispiel: eine gestapelte box-shadow
Ein einzelner Schatten liest sich so: box-shadow: 0 4px 6px rgba(0,0,0,0.1); — kein horizontaler Versatz, 4px nach unten, 6px Weichzeichnung und ein helles, durchscheinendes Schwarz. Für echte Tiefe stapelst du zwei: einen engen, dunklen Schatten dicht am Element plus einen breiteren, weicheren weiter außen. Fügst du eine Ebene hinzu, verbindet das Tool sie mit einem Komma: box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);. Jede Ebene behält ihren eigenen Versatz, ihre Weichzeichnung, Ausdehnung und Farbe.
Hinweise und Sonderfälle
Offset X und Y verschieben den Schatten nach rechts und unten (negative Werte nach links und oben), Blur macht die Kante weicher, und Spread vergrößert oder verkleinert den Schatten, bevor die Weichzeichnung greift — eine Eigenschaft, die text-shadow nicht kennt. Schaltest du Inset ein, kippt der Schatten nach innen, was gedrückten Buttons und vertieften Eingabefeldern ihre Optik gibt. Halte Textschatten dezent: starke Weichzeichnung oder hohe Deckkraft hinter Buchstaben schadet der Lesbarkeit. Bist du zufrieden, kopierst du das CSS mit einem Klick oder lädst es herunter, um es direkt in dein Stylesheet zu übernehmen.