CSS-Box-Shadow-Generator
Schatten per Schieberegler einstellen und den box-shadow-Code direkt kopieren
Ein Tool, mit dem Sie Offset, Weichzeichnung, Ausbreitung, Farbe, Deckkraft und inset per Schieberegler einstellen und den Schatten in einer Live-Vorschau gestalten. Der fertige box-shadow-CSS-Code lässt sich direkt kopieren – ideal für Webdesigner und Frontend-Entwickler, die schnell Schatten für Karten oder Buttons erstellen wollen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Stellen Sie mit den Schiebereglern den horizontalen und vertikalen Offset, die Weichzeichnung (blur), die Ausbreitung (spread) und die Deckkraft ein.
- Wählen Sie die Schattenfarbe und aktivieren Sie bei Bedarf inset (inneren Schatten).
- Prüfen Sie das Ergebnis in der Vorschaubox.
- Kopieren Sie den erzeugten box-shadow-Code und verwenden Sie ihn.
FAQ
- Was bedeutet inset?
- Mit aktiviertem inset liegt der Schatten nicht außen, sondern innen im Element und erzeugt einen eingedrückten, vertieften Effekt. Das wird oft für Eingabefelder oder gedrückte Buttons genutzt.
- Kann ich mehrere Schatten übereinanderlegen?
- Dieses Tool erstellt einen einzelnen Schatten. Wenn Sie mehrere brauchen, können Sie die erzeugten Werte durch Kommas getrennt in einem box-shadow zusammenfügen.
- Werden die eingegebenen Werte auf einem Server gespeichert?
- Nein. Vorschau und CSS-Erzeugung laufen vollständig im Browser; kein Wert wird an einen Server gesendet.