CSS-Box-Shadow-Generator
Gestalte einen CSS-box-shadow mit Live-Reglern, Presets und Vorschau und kopiere die fertige Regel.
100 % privat — alles läuft in Ihrem Browser
So funktioniert's
- 1
Mit den Reglern Versatz, Weichzeichnen, Ausbreitung, Farbe und Deckkraft einstellen.
- 2
Ein Preset wählen oder einen vorhandenen box-shadow einfügen und weiterbearbeiten.
- 3
Die CSS-Regel kopieren und ins Stylesheet einfügen.
Beispiele
Erhöhte Karte
Eingabe
0 8px 24px -4px rgba(15,23,42,.18)Ausgabe
box-shadow: 0 8px 24px -4px rgba(15,23,42,.18);Neon-Leuchten
Eingabe
0 0 24px 2px rgba(99,102,241,.45)Ausgabe
box-shadow: 0 0 24px 2px rgba(99,102,241,.45);Häufige Fragen
Was bewirkt die Ausbreitung?
Sie vergrößert oder verkleinert den Schatten vor dem Weichzeichnen; negative Werte ziehen ihn zusammen.
Warum sieht der Innenschatten anders aus?
Er wird innerhalb des Elements gezeichnet und wirkt dadurch eingedrückt.
Funktioniert es mit Tailwind?
Ja. Den Wert in eine beliebige Eigenschaft wie shadow-[…] einsetzen.
Ähnliche Tools
Border-Radius-GeneratorForme vier Ecken einzeln, verknüpfe sie und kopiere die CSS-border-radius-Regel.VerlaufsgeneratorErstellen Sie CSS-Verläufe (linear und radial) visuell und kopieren Sie den CSS-Code.CSS-FarbgeneratorWandeln Sie eine Basisfarbe in eine 10-stufige Farbpalette um und exportieren Sie sie als CSS-Variablen.JSON-FormatiererJSON sofort formatieren, verschönern, komprimieren und validieren — direkt im Browser.JSON-ValidatorValidieren Sie JSON sofort und finden Sie Syntaxfehler mit exakter Zeile, Spalte und Position – direkt im Browser.Base64-Kodierer/DekodiererKodieren Sie Text zu Base64 und dekodieren Sie Base64 zurück zu Text – mit voller Unicode- und Emoji-Unterstützung, direkt im Browser.