CSS-Schatten-Generator
Form einen Schatten mit Reglern und kopiere das CSS.
Box und Hintergrund
Läuft in deinem Browser. Nichts, was du eingibst, wird irgendwohin gesendet.
- Bis zu 8 Ebenen stapeln
- Innenschatten
- 6 fertige Vorlagen
So machst du einen CSS-Box-Schatten
- Starte mit einer Vorlage, oder bewege die Regler für Versatz, Unschärfe und Streuung.
- Füg Ebenen für einen weicheren, natürlicheren Schatten hinzu.
- Kopiere die box-shadow-Zeile in dein CSS.
Was jeder box-shadow-Wert macht
| Wert | Bedeutung | Typischer Bereich |
|---|---|---|
| Versatz X | Bewegt den Schatten nach rechts, oder links bei negativem Wert | -100 bis 100px |
| Versatz Y | Bewegt den Schatten nach unten, oder oben bei negativem Wert | -100 bis 100px |
| Unschärfe | Weicht die Kante auf; 0 ergibt einen scharfkantigen Schatten | 0 bis 200px |
| Streuung | Vergrößert oder verkleinert den Schatten, bevor er unscharf wird | -100 bis 100px |
| Deckkraft | Wie kräftig die Schattenfarbe wirkt | 10 bis 30% für einen natürlichen Look |
Startwerte für gängige Looks
| Vorlage | Versatz Y | Unschärfe | Streuung | Deckkraft |
|---|---|---|---|---|
| Weich | 10px | 30px | -5px | 20% |
| Scharf | 6px (auch X) | 0px | 0px | 100% |
| Leuchten | 0px | 24px | 4px | 55% |
| Innen | 2px | 6px | 0px | 25% |
Geschichtet und Schwebend bauen darauf auf, indem sie zwei oder drei Schatten gleichzeitig stapeln, was eine einzelne Ebene nicht nachbilden kann.
Tipps für natürlich wirkende Schatten
- Echtes Licht wirft selten einen reinen schwarzen Schatten. Nutze 10 bis 30 Prozent Deckkraft und lehn die Farbe Richtung Farbton des Hintergrunds für ein weicheres Ergebnis.
- Stapel 2 oder 3 Schatten: einen kleinen, engen nah an der Box und einen größeren, unschärferen weiter außen, so wie die Vorlagen Geschichtet und Schwebend aufgebaut sind.
- Negative Streuung mit großem vertikalem Versatz ergibt den schwebenden Karten-Look, der in modernen Oberflächen üblich ist.
- Ein Elternelement mit overflow: hidden schneidet einen Schatten genau wie es Inhalt abschneidet, füg dem Elternelement also lieber Padding hinzu, statt überall overflow zu entfernen.
Häufige Fragen zu Schatten-Generator
Was bedeuten die box-shadow-Werte?
Der Reihe nach: horizontaler Versatz, vertikaler Versatz, Unschärferadius, Streuungsradius und Farbe. Positive Versätze bewegen den Schatten nach rechts und unten, und das Schlüsselwort inset zeichnet ihn innerhalb der Box.
Wie mache ich einen Schatten natürlich?
Stapel zwei oder drei weiche Schatten mit niedriger Deckkraft: einen kleinen, engen nah an der Box und einen größeren, unschärferen weiter außen. Echte Schatten sind selten reines Schwarz bei voller Stärke.
Was macht Streuung?
Streuung vergrößert oder verkleinert den Schatten, bevor er unscharf gezeichnet wird. Eine negative Streuung mit großem vertikalem Versatz ergibt den schwebenden Karten-Look.
Warum wird mein Schatten abgeschnitten?
Ein Elternelement mit overflow: hidden schneidet alles ab, was außerhalb seiner Box gezeichnet wird, Schatten eingeschlossen. Füg dem Elternelement Padding hinzu oder entferne die overflow-Einstellung.
Wie viele Schattenebenen kann ich stapeln?
Bis zu 8 auf dieser Seite. CSS selbst hat kein festes Limit für box-shadow-Ebenen, aber mehr als 3 oder 4 sehen selten anders aus und kosten mehr beim Rendern.
Ändert ein Box-Schatten die Größe oder den Abstand eines Elements?
Nein. box-shadow ist rein visuell und beeinflusst nie das Layout, anders als ein border oder outline, benachbarte Elemente verschieben sich also nie, wenn du einen hinzufügst oder änderst.