CSS-Verlauf-Generator
Lineare, radiale und konische Verläufe bauen und CSS kopieren.
Design
Schatten-Generator
Mehrere Schatten auf einer Karte stapeln und CSS kopieren.
Was es macht. Ein Schattengenerator baut CSS-Schatten mit Live-Vorschau. Der wichtigste Punkt ist das Stapeln: Ein realistischer Schatten besteht aus zwei bis drei Ebenen unterschiedlicher Weichheit, nicht aus einer einzigen — das ist der Unterschied zwischen einem Schatten, der wirkt, und einem grauen Fleck.
Läuft im BrowserKein UploadKeine AnmeldungFunktioniert offline
So benutzt du Schatten-Generator
- Stell Versatz, Weichzeichnung, Ausdehnung und Farbe ein.
- Füg weitere Schattenebenen hinzu, um Tiefe zu erzeugen.
- Kopier das fertige CSS.
Was die Werte bedeuten
Ein Schatten hat vier Zahlen und eine Farbe, in fester Reihenfolge.
| Wert | Wirkung |
|---|---|
| X-Versatz | Verschiebung nach rechts, negativ nach links |
| Y-Versatz | Verschiebung nach unten — bei Licht von oben der Hauptwert |
| Weichzeichnung | Wie weich der Rand ausläuft; 0 ergibt eine harte Kante |
| Ausdehnung | Vergrößert oder verkleinert den Schatten vor dem Weichzeichnen |
| Farbe | Meist Schwarz mit niedriger Deckkraft |
| inset | Zeichnet den Schatten nach innen statt nach außen |
Als Ausgangspunkt gilt: Die Weichzeichnung sollte etwa doppelt so groß sein wie der Y-Versatz. Ein Versatz von 4 mit einer Weichzeichnung von 8 sieht natürlich aus; ein Versatz von 4 mit einer Weichzeichnung von 4 wirkt hart und aufgeklebt.
Warum Schatten unecht aussehen
Drei Fehler machen fast jeden misslungenen Schatten aus.
Der erste ist zu hohe Deckkraft. Reines Schwarz mit 50 Prozent ergibt einen grauen Fleck, keinen Schatten. Echte Schatten liegen zwischen 5 und 15 Prozent — mehrere schwache Ebenen wirken besser als eine kräftige.
Der zweite ist eine einzige Ebene. In der Wirklichkeit hat ein Objekt einen engen, dunkleren Kernschatten und einen weiten, sehr schwachen Halbschatten. Zwei bis drei Ebenen bilden das nach.
Der dritte ist ein neutralgrauer Schatten. Schatten nehmen die Farbe ihrer Umgebung auf. Auf einer warmen Oberfläche wirkt ein leicht bräunlicher, auf einer kühlen ein leicht bläulicher Schatten deutlich glaubwürdiger als reines Schwarz.
Und die Richtung muss über alle Elemente hinweg dieselbe sein. Licht kommt in einem Interface von oben — wenn eine Karte nach unten und ein Knopf nach oben wirft, stimmt die Szene nicht mehr.
Ein System statt einzelner Werte
Statt jeden Schatten einzeln zu erfinden, definiert man vier bis fünf Stufen und verwendet nur diese.
Eine bewährte Staffelung: Stufe 1 für Ränder und Eingabefelder, Stufe 2 für Karten, Stufe 3 für angehobene Elemente und Menüs, Stufe 4 für Dialoge, Stufe 5 für Elemente über allem anderen.
Mit jeder Stufe wachsen Versatz und Weichzeichnung überproportional, die Deckkraft dagegen nur leicht. So entsteht der Eindruck zunehmender Höhe.
Im Dunkelmodus funktionieren Schatten schlecht, weil ein dunkler Schatten auf dunklem Grund unsichtbar bleibt. Dort arbeitet man stattdessen mit helleren Flächen: Je höher ein Element liegt, desto heller seine Fläche. Ein Schatten kann ergänzend bleiben, trägt die Tiefe aber nicht mehr.
Häufige Fragen
Warum sieht mein Schatten aus wie ein grauer Fleck?
Zu hohe Deckkraft. Bleib zwischen 5 und 15 Prozent und stapel lieber mehrere schwache Ebenen.
Wie viele Ebenen braucht ein Schatten?
Zwei bis drei. Ein enger dunklerer Kern plus ein weiter, sehr schwacher Halbschatten.
Was ist der Unterschied zu drop-shadow?
box-shadow folgt dem Rechteck des Elements, filter: drop-shadow folgt der tatsächlichen Form — wichtig bei PNG und SVG mit Transparenz.
Wie funktionieren Schatten im Dunkelmodus?
Schlecht. Dort arbeitet man mit helleren Flächen für höhere Ebenen statt mit dunkleren Schatten.
Was macht der Ausdehnungswert?
Er vergrößert oder verkleinert den Schatten vor dem Weichzeichnen. Negative Werte ziehen ihn unter das Element zurück.
Wird etwas gesendet?
Nein, alles läuft in diesem Tab.
Ratgeber zu Schatten-Generator
- CSS Gradients, Shadows and Palettes7 min read