Box-Shadow-Generator
Box Shadow Generator
Setzt mehrschichtige Box- und Textschatten mit Live-Vorschau zusammen und gibt das CSS aus.
Setzt einen Schatten aus Ebenen zusammen und gibt ihn als `box-shadow`, `text-shadow` oder `drop-shadow()`-Filter aus. Was man wissen sollte: Eine Ebene ist fast nie richtig – ein echter Schatten ist ein enger dunkler Kontaktschatten plus ein weiter schwacher Umgebungsschatten, und ein einzelner Schatten kann nur eines von beidem sein. Die Seite mahnt das an und sagt Ihnen, welche Teile einer Ebene die Zieleigenschaft nicht ausdrücken kann.
- Ebene 1
- Ebene 2
Vorlagen
Die Versätze wachsen etwa linear mit der Höhe und die Weichzeichnung mit deren Quadratwurzel — genau das erzeugt eine Punktlichtquelle über einer Ebene. Die Deckkraft fällt, während der Schatten wächst, weil sich dieselbe Verdeckung über mehr Fläche verteilt; wer das umdreht, bekommt handgedrehte Schatten, die wie Schmutzflecken aussehen.
CSS
box-shadow: 0px 1px 3px rgb(0 0 0 / 0.1), 0px 4px 8px -2px rgb(0 0 0 / 0.08);So funktioniert es
Sagen Sie, worauf er kommt
`box-shadow` für eine Karte oder einen Button, `text-shadow` für Schrift, `drop-shadow()` für alles mit echter Transparenz – ein Icon oder ein freigestelltes PNG. Die Vorschau wechselt entsprechend, Sie sehen also immer das Richtige.
Beginnen Sie mit einer Vorgabe
Es sind Stapel aus zwei Ebenen, bei denen die Versätze linear mit der Höhe wachsen, die Unschärfe mit deren Quadratwurzel, und die Deckkraft fällt, wenn der Schatten sich ausbreitet. Das Letzte ist der Teil, den man von Hand verkehrt herum macht, und ihn verkehrt herum zu machen ist es, was einen Schatten wie einen Fleck aussehen lässt.
Setzen Sie die Flächenfarbe auf die, die Sie tatsächlich haben
Ein auf Weiß abgestimmter Schatten ist auf einer grauen Seite zu schwach und auf einer dunklen zu stark. Das Flächen-Farbfeld ist da, damit Sie gegen den Hintergrund abstimmen, auf dem die Komponente wirklich sitzen wird.
Passen Sie die Ebenen an
Versatz, Unschärfe, Ausbreitung und Farbe pro Ebene, und ein Inset-Kästchen. Tippen Sie die Farbe, statt das Farbfeld zu verwenden, wenn Sie Alpha brauchen – Schattenfarben sind fast immer halbtransparent, und das native Farbeingabefeld kann das nicht darstellen.
Kopieren Sie die Deklaration
Der Eigenschaftsname wechselt mit dem Ziel, was Sie kopieren, ist also bereit, so eingefügt zu werden, wie es ist.
Häufige Fragen
Mein Inset und meine Ausbreitung sind verschwunden, als ich das Ziel gewechselt habe. Wo sind sie hin?
Sie wurden verworfen, und die Seite sagt das über der Ausgabe. `text-shadow` hat in seiner Grammatik kein Inset und keine Ausbreitung – es nimmt ein x, ein y, eine Unschärfe und eine Farbe, Punkt. `drop-shadow()` hat ebenfalls kein Inset und keine Ausbreitung. Sie trotzdem auszugeben ergäbe eine Deklaration, die der Browser vollständig verwirft, und das ist schlimmer, als den Teil zu verlieren, der nicht überleben kann.
Warum stimmt das Farbfeld nicht mit dem überein, was ich getippt habe?
Das Farbfeld ist `<input type="color">`, das nur `#rrggbb` versteht und überhaupt kein Alpha hat. Es zeigt ein bestmögliches Hex dessen, was Sie getippt haben, und das Textfeld bleibt maßgeblich. Bearbeiten Sie den Text, wenn der Wert ein Alpha hat.
Ist `drop-shadow()` nur ein langsameres `box-shadow`?
Nein, es beantwortet eine andere Frage. `box-shadow` zeichnet die Border-Box nach, ein transparentes PNG bekommt also ein Rechteck. `drop-shadow()` folgt dem Alphakanal, zeichnet also die tatsächliche Form nach. Es kostet allerdings einen Compositing-Durchgang, und es kann kein Inset und keine Ausbreitung, verwenden Sie es also, wenn die Form zählt, und `box-shadow` sonst.
Wie viele Ebenen sind zu viele?
Zwei oder drei tun alles, was eine Oberfläche braucht. Jede Ebene ist eine weitere Unschärfe, die der Compositor bei jedem Zeichnen ausführt, und ein Schatten aus sechs Ebenen auf einer Liste mit zweihundert Zeilen ist auf einem Telefon ein messbarer Bildraten-Verlust. Die Vorgaben hören aus diesem Grund bei drei auf.
Eingabe aus
Border-Radius-Generator
Border Radius Generator
Formt jede Ecke unabhängig, einschließlich der Zwei-Wert-Squircle-Syntax, und gibt das CSS aus.
Easing-Kurven-Editor
Easing Curve Editor
Bearbeitet eine cubic-bezier- oder Feder-Kurve gegen eine animierte Vorschau und gibt die CSS-Timing-Funktion aus.
CSS-Filter-Spielwiese
CSS Filter Playground
Stapelt Blur-, Helligkeits-, Sättigungs-, Farbton- und Drop-Shadow-Filter auf einem Beispiel und gibt das CSS aus.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Border-Radius-Generator
Border Radius Generator
Formt jede Ecke unabhängig, einschließlich der Zwei-Wert-Squircle-Syntax, und gibt das CSS aus.
CSS-Filter-Spielwiese
CSS Filter Playground
Stapelt Blur-, Helligkeits-, Sättigungs-, Farbton- und Drop-Shadow-Filter auf einem Beispiel und gibt das CSS aus.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
CSS-Verlaufsgenerator
CSS Gradient Builder
Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.