CSS-Box-Shadow-Generator
Schatten per Schieberegler einstellen und den box-shadow-Code direkt kopieren
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
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.
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.