CSS Schatten Generator
Was ist CSS Schatten Generator
Mit einem CSS Schatten Generator baust du einen box-shadow visuell auf und kopierst den exakten CSS-Code. Lege den horizontalen und vertikalen Versatz, den Weichzeichnungsradius, die Ausbreitung und die Schattenfarbe mit ihrer Deckkraft fest und sieh zu, wie sich die Vorschau beim Ziehen der Regler ändert. Du kannst mehrere Schatten auf einem Element stapeln und jede Ebene auf innen umschalten, sodass das Ausgabefeld immer eine fertige box-shadow-Deklaration zum Einfügen bereithält.
Verwendung
- Ziehe die Versatzregler, um den Schatten horizontal und vertikal zu verschieben.
- Stelle den Weichzeichnungsradius für eine weiche Kante ein und die Ausbreitung, um den Schatten zu vergrößern oder zu verkleinern.
- Wähle die Schattenfarbe, passe die Deckkraft an und aktiviere innen für einen inneren Schatten.
- Füge bei Bedarf weitere Ebenen hinzu und kopiere den erzeugten CSS-Code aus dem Ausgabefeld.
Wann ist es nützlich?
Brauchst du einen dezenten Kartenschatten, der modern statt hart wirkt? Setze den Versatz auf 0px und 10px, 20px Weichzeichnen, keine Ausbreitung und Schwarz mit 25% Deckkraft, dann kopiere box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); direkt in dein Stylesheet. Genauso praktisch für Hover-Zustände von Buttons, Tiefe in Ebenen oder einen inneren Schatten, der ein Eingabefeld eingedrückt aussehen lässt.
Häufig gestellte Fragen
Was bedeuten die box-shadow-Werte?
In der Reihenfolge sind es der horizontale Versatz, der vertikale Versatz, der Weichzeichnungsradius, die Ausbreitung und die Farbe. Positive Versätze schieben den Schatten nach rechts und unten, das Weichzeichnen glättet die Kante, und die Ausbreitung vergrößert oder verkleinert den ganzen Schatten, bevor er weichgezeichnet wird.
Wozu dient der Ausbreitungswert?
Die Ausbreitung ändert die Größe des Schattens, bevor das Weichzeichnen angewendet wird. Ein positiver Wert macht den Schatten größer als das Element, ein negativer zieht ihn zusammen, was für enge Schatten nützlich ist, die nur an einer Seite hervorschauen.
Kann ich mehr als einen Schatten stapeln?
Ja. Füge so viele Ebenen hinzu, wie du möchtest, und jede wird zu einem durch Komma getrennten Schatten in derselben box-shadow-Regel. Einen weichen breiten Schatten unter einen enger anliegenden zu stapeln, ist ein gängiger Weg zu realistischer Tiefe.
Was ist ein innerer Schatten?
Ein innerer Schatten wird innerhalb des Elements statt dahinter gezeichnet, sodass die Box eingedrückt oder vertieft wirkt. Aktiviere innen auf einer Ebene, um sie umzuschalten, was bei Eingabefeldern und gedrückten Buttons gut funktioniert.
Kann ich dieses Tool mit vorausgefüllten Eingaben teilen?
Ja. Die URL aktualisiert sich automatisch, während du die Regler bewegst. Kopiere sie aus der Adressleiste oder nutze den Teilen-Knopf, und wer den Link öffnet, sieht deinen exakten Schatten schon fertig.
Ähnliche Werkzeuge
Seitenverhältnis-Rechner
Berechne das Seitenverhältnis, finde die fehlende Breite oder Höhe und skaliere Bilder und Videos unter Beibehaltung der Proportionen. Kostenlos.
Barcode-Generator
EAN-13- oder Code-128-Barcodes online generieren. Zahl oder Text eingeben und als SVG oder PNG herunterladen. Kostenlos, ohne Anmeldung.
Base64-Decoder
Dekodiere Base64-Strings sofort zu Klartext im Browser. Unterstützt vollständige Unicode-Ausgabe mit Emojis. Kostenloser Base64-Decoder.