Box-Shadow-Generator
Passe Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft mit Reglern und einer Farbauswahl an, um einen CSS-Box-Shadow zu gestalten, sieh ihn live an einer Vorschau-Box angewendet, und kopiere die generierte box-shadow-Deklaration direkt in dein Stylesheet.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.35);So funktioniert’s
Offset-X und Offset-Y verschieben den Schatten horizontal und vertikal, der Weichzeichnungsradius (Blur) weicht seine Kante auf, und der Ausbreitungsradius (Spread) vergrößert oder verkleinert ihn, bevor die Weichzeichnung angewendet wird. Wähle Farbe und Deckkraft für den Schatten, und aktiviere „Inset", um den Schatten innerhalb statt außerhalb der Box-Kante zu zeichnen.
Tipp
Dezente Schatten wirken meist am besten: ein kleiner Versatz, ein Weichzeichnungsradius etwa zwei- bis dreimal so groß wie der Versatz, und eine Deckkraft deutlich unter 50 % wirken wie ein sanftes Abheben statt wie ein schwerer Umriss.
Kann ich mehrere Schatten kombinieren?
Ja — CSS-box-shadow akzeptiert eine kommagetrennte Liste von Schatten, die von oben nach unten übereinandergelegt werden. Dieses Tool erzeugt jeweils einen Schatten; kombiniere mehrere generierte Deklarationen (durch Kommas getrennt), um mehrschichtige, realistischere Schatten zu erstellen.
Weitere Tools aus dieser Kategorie
Regex-Tester
Teste reguläre Ausdrücke an einem Beispieltext mit Live-Hervorhebung der Treffer.
Cron-Ausdruck-Parser
Wandle einen 5-Felder-Cron-Ausdruck in eine verständliche Zeitplanbeschreibung um und sieh die nächsten Ausführungszeiten.
Text-Kodierungs-Konverter
Konvertiere Text gleichzeitig in UTF-8-Hex, Binär, Code Points, Base64, URL-Kodierung und HTML-Entitäten.
Passwort-Generator
Erstelle sofort starke, zufällige Passwörter – direkt in deinem Browser.
JSON-Formatierer & Validator
Formatiere, validiere und minimiere JSON sofort in deinem Browser.
UUID-Generator
Erzeuge zufällige UUIDs nach RFC 4122 Version 4 direkt in deinem Browser.
JWT-Decoder
Dekodiere und untersuche JSON Web Tokens (JWTs) direkt in deinem Browser.
Diff-Prüfer
Vergleiche zwei Textblöcke und sieh sofort jede hinzugefügte oder entfernte Zeile.
Slug-Generator
Wandle beliebigen Text in Echtzeit in einen sauberen, URL-freundlichen Slug um.
Zahlensystem-Umrechner
Zahlen sofort zwischen Binär-, Oktal-, Dezimal- und Hexadezimalsystem umrechnen.
Unix-Zeitstempel-Umrechner
Unix-Zeitstempel live in Datumsangaben umrechnen und umgekehrt.
Hash-Generator
Erzeuge SHA-1-, SHA-256- und SHA-512-Hash-Digests aus beliebigem Text, direkt in deinem Browser.
Cron-Ausdruck-Generator
Erstelle einen gültigen 5-Felder-Cron-Ausdruck über ein einfaches Formular — ohne die Syntax auswendig zu lernen.
Lorem-Ipsum-Generator
Erzeuge Lorem-Ipsum-Platzhaltertext als Absätze, Sätze oder Wörter für Mockups und Layouts.
Markdown-Vorschau
Schreibe links Markdown und sieh rechts sofort das gerenderte HTML.
IP-Subnetz-Rechner
Gib eine IPv4-Adresse in CIDR-Notation ein und erhalte Netz, Maske, Broadcast und Host-Bereich.
HTTP-Statuscode-Nachschlagewerk
Schlage jeden HTTP-Statuscode nach und erfahre seine Standardbedeutung in einfachen Worten.
SQL-Formatierer
Formatiere minifiziertes oder unübersichtliches SQL in lesbare, eingerückte Anweisungen.
Bild-zu-Base64-Konverter
Wandle ein Bild in eine Base64-Daten-URI um, die du direkt in HTML, CSS oder JSON einfügen kannst — komplett in deinem Browser.
Semver-Vergleich
Vergleiche zwei semantische Versionsangaben und sieh, welche laut den offiziellen Semver-Regeln Vorrang hat.