CSS-box-shadow-Generator
Die Deklaration, nicht eine Fläche zum Ziehen.
Beispiele ersetzen vorübergehend Eingabe und Einstellungen. Du kannst deine vorherige Arbeit wiederherstellen.
- Schatten
- 1
box-shadow: 0px 4px 12px rgba(0,0,0,.15);
Ihre Dateien bleiben auf Ihrem Gerät
Dieses Tool läuft vollständig in Ihrem Browser. Was Sie einfügen, wird auf Ihrem Gerät verarbeitet und nie an einen Server gesendet. Es ist daher auch für Tokens, Schlüssel und unveröffentlichte Texte sicher.
Beispiel
Beispiel: weicher Kartenschatten aus drei Ebenen – und was bei text-shadow wegfällt
Eine Produktkarte auf weißem Grund soll leicht abgehoben wirken, ohne grauen Rand. Statt eines einzelnen Schattens kommen drei Zeilen ins Feld, jede als „x y Weichzeichnung Ausdehnung Farbe“.
- 0 1 3 rgba(0,0,0,.12) – eine enge, etwas dunklere Kante direkt unter der Karte.
- 0 4 8 -2 rgba(0,0,0,.08) – die mittlere Ebene; die Ausdehnung −2 zieht sie zusammen, damit sie seitlich nicht hervorsteht.
- 0 16 32 -8 rgba(0,0,0,.10) – der weite, weiche Auslauf nach unten.
- Die Seite hängt px an jede Zahl, setzt die drei Schatten untereinander in eine box-shadow-Deklaration und zeigt „Schatten: 3“.
| Eingetippte Zeile | In der Deklaration |
|---|---|
| 0 1 3 rgba(0,0,0,.12) | 0px 1px 3px rgba(0,0,0,.12) |
| 0 4 8 -2 rgba(0,0,0,.08) | 0px 4px 8px -2px rgba(0,0,0,.08) |
| 0 16 32 -8 rgba(0,0,0,.10) | 0px 16px 32px -8px rgba(0,0,0,.10) |
| 0 4 8 -2 rgba(0,0,0,.08) als text-shadow | 0px 4px 8px rgba(0,0,0,.08), dazu ein Kommentar, warum die −2 fehlt |
box-shadow: 0px 1px 3px rgba(0,0,0,.12), 0px 4px 8px -2px rgba(0,0,0,.08), 0px 16px 32px -8px rgba(0,0,0,.10); – in die CSS-Regel der Karte kopieren. Auf text-shadow umgeschaltet fällt die Ausdehnung weg, und ein CSS-Kommentar darunter sagt, warum.
So funktioniert es
- Die Regler für einen einzelnen Schatten benutzen, oder für mehrere je einen je Zeile eintippen.
- Eine Zeile ist „x y Weichzeichnung Ausdehnung Farbe“ – jede weggelassene Zahl ist null.
- Auf text-shadow umschalten, wenn Text den Schatten bekommt.
- Die Deklaration kopieren.
Häufige Fragen
- Wozu mehr als ein Schatten?
- Weil ein einzelner fast nie richtig aussieht. Ein echter besteht aus einer engen dunklen Kante und einem weiten weichen Auslauf; zwei oder drei mit unterschiedlicher Weichzeichnung und Deckkraft übereinander sind es, was eine Karte abgehoben wirken lässt statt umrandet.
- Was macht die Ausdehnung?
- Sie vergrößert oder verkleinert den Schatten, bevor er weichgezeichnet wird. Eine negative Ausdehnung zieht ihn zusammen – so bekommt man einen Schatten, der unter einem Element sitzt, ohne seitlich hervorzuquellen.
- Warum wird meine text-shadow-Ausdehnung ignoriert?
- Weil text-shadow keine Ausdehnung kennt – es nimmt nur x, y, Weichzeichnung und Farbe. Steht eine vierte Länge darin, verwirft der Browser die ganze Deklaration, und es erscheint gar kein Schatten. Die Seite lässt die Zahl deshalb im CSS weg und sagt das in einer Notiz darunter.
- Was ist „nach innen“?
- Damit wird der Schatten innen statt außen gezeichnet – so lässt man etwas eingedrückt aussehen. Das gilt nur für box-shadow.
- Gilt „Nach innen“ für alle Zeilen?
- Ja. Ist es eingeschaltet, bekommt jeder Schatten das Wort inset, auch die eingetippten Zeilen. Soll nur einer von mehreren nach innen, lassen Sie den Haken aus und schreiben inset an den Anfang dieser einen Zeile, etwa „inset 0 2 6 rgba(0,0,0,.2)“.
- Welche Farbangaben gehen?
- Alles, was CSS kennt, wird unverändert übernommen: rgba(0,0,0,.15), #0003 oder hsl(). Fehlt die Farbe in einer Zeile, nimmt die Seite rgba(0,0,0,.2). Auch px darf dabeistehen: 0 2px 4px #0003 wird zu 0px 2px 4px #0003.
- Wird etwas an einen Server geschickt?
- Nein. Es läuft im Browser, was Sie eingeben, bleibt auf Ihrem Rechner.