CSS-Schattengenerator
Erstellen Sie schöne CSS-Box-Schatten mit Live-Vorschau und mehreren Ebenen
Erstellen Sie schöne CSS-Box-Schatten mit Live-Vorschau und mehreren Ebenen
- Eingabe vorbereiten
Wähle die passenden Optionen mit den Steuerelementen unten.
- Aufgabe ausführen
Passe die Steuerelemente unten an und prüfe die Vorschau.
- Ergebnis verwenden
Prüfe das Ergebnis und nutze die verfügbaren Kopier- oder Download-Funktionen.
Pixelschatten als CSS, SCSS, Tailwind-Klasse oder JavaScript. Farbvariablen benötigen Definitionen auf der Zielseite. Tailwind nutzt Arbitrary-Value-Syntax; im Zielprojekt prüfen.
Generierter Code
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
Schatten-Steuerung
px
px
px
px
Vorschau-Einstellungen
200px
Live-Vorschau
Preview
Schatten-Vorlagen
Subtile Schatten
Mittlere Schatten
Starke Schatten
Material Design
Neumorphisch
CSS-Schattengenerator
Pixelschatten als CSS, SCSS, Tailwind-Klasse oder JavaScript. Farbvariablen benötigen Definitionen auf der Zielseite. Tailwind nutzt Arbitrary-Value-Syntax; im Zielprojekt prüfen.
Funktionen
- Pixelschatten als CSS, SCSS, Tailwind-Klasse oder JavaScript. Farbvariablen benötigen Definitionen auf der Zielseite. Tailwind nutzt Arbitrary-Value-Syntax; im Zielprojekt prüfen.
- Schatten-Ebenen
- Live-Vorschau
- Schatten-Vorlagen
Anleitung
- Schatten-Eigenschaften mit Schiebereglern anpassen
- Schattenfarbe mit Farbwähler auswählen
- Zwischen Außen- und Innenschatten umschalten
- Mehrere Schattenebenen hinzufügen
- Aus professionellen Vorlagen wählen
- Schatten in Echtzeit in der Vorschau ansehen
- Vorschau-Box-Größe anpassen
- Generierten Code im bevorzugten Format kopieren
- Mehrere Ebenen verwalten
- Ebenen-Steuerelemente verwenden