CSS Box Shadow Generator
Erstelle individuelle Schatten mit Live-Vorschau für Boxen, Kreise oder Header und kopiere den CSS-Code. Ändere die Farben für Schatten, Hintergrund um der Box.
Shadow Settings
CSS Code
Colors
Box Controls
Presets
FAQ zum Nioveo Box Shadow Generator
Grundlagen
Was ist ein Box-Shadow?
Ein Box-Shadow ist ein Schatten, der in CSS um ein HTML-Element gelegt wird. Die CSS-Eigenschaft „box-shadow“ legt Position, Größe, Weichzeichnung und Farbe des Schattens fest.
Damit lassen sich Schlagschatten, weiche Tiefenwirkungen oder innenliegende Effekte erzeugen, ohne dass dafür Bilddateien nötig sind.
Wozu dient der Box-Shadow-Generator?
Der Generator erzeugt den passenden CSS-Code für einen Schatten auf visuellem Weg. Über Schieberegler und Farbwähler wird der Schatten eingestellt, das Ergebnis erscheint sofort in der Vorschau.
Der fertige „box-shadow“-Code kann anschließend kopiert und in das eigene Stylesheet eingefügt werden.
Muss ich CSS beherrschen, um das Tool zu nutzen?
Nein. Alle Einstellungen erfolgen über Regler und Auswahlfelder, Vorkenntnisse in CSS sind nicht erforderlich.
Der ausgegebene Code entspricht dem CSS-Standard und funktioniert in jedem Projekt, das eigene Styles zulässt.
Bedienung des Tools
Wie erstelle ich einen Schatten?
Die Schieberegler für Versatz, Weichzeichnung, Ausbreitung und Deckkraft werden angepasst und bei Bedarf die Farben festgelegt. Die Vorschau aktualisiert sich dabei in Echtzeit.
Passt das Ergebnis, lässt sich der CSS-Code über die Schaltfläche „Copy“ kopieren.
Wofür sind die Vorlagen (Presets)?
Die Vorlagen sind fertige Ausgangspunkte für vorgefertigte Schattenstile. Ein Klick übernimmt die Werte in die Regler, die sich danach frei weiter anpassen lassen.
Was bedeuten „Box“, „Kreis“ und „Header“?
Sie ändern nur die Vorschaufläche, nicht den Code: Der erzeugte „box-shadow“-Wert bleibt in allen drei Fällen identisch.
So lässt sich beurteilen, wie ein Schatten an einem rechteckigen Element, einem runden Element oder einem breiten Header wirkt.
Kann ich alle Werte zurücksetzen?
Ja. Die Schaltfläche „Reset“ stellt sämtliche Regler und Farben wieder auf die Ausgangswerte zurück.
Die Parameter im Detail
Was bewirken horizontaler und vertikaler Versatz?
Der horizontale Versatz verschiebt den Schatten nach links (negative Werte) oder nach rechts (positive Werte).
Der vertikale Versatz verschiebt ihn nach oben (negativ) oder nach unten (positiv). Bei einem Wert von 0 in beiden Feldern liegt der Schatten gleichmäßig hinter dem Element.
Was ist der Unterschied zwischen Blur und Spread?
Die Weichzeichnung (Blur) bestimmt, wie weich der Schattenrand verläuft: Der Wert 0 ergibt eine harte Kante, höhere Werte einen zunehmend diffusen Übergang.
Die Ausbreitung (Spread) vergrößert oder verkleinert den gesamten Schatten, bevor die Weichzeichnung angewendet wird.
Was regelt die Deckkraft (Opacity)?
Die Deckkraft steuert die Transparenz der Schattenfarbe. Niedrige Werte ergeben einen dezenten, hohe Werte einen kräftigen Schatten.
Im Code wird die Deckkraft als „rgba“-Farbe mit Alphawert ausgegeben.
Was ist ein Inset-Schatten (innenliegender Schatten)?
Mit der Option „Inset Shadow“ wird der Schatten nach innen statt nach außen gelegt. Das Element wirkt dadurch vertieft oder eingedrückt, häufig verwendet für Eingabefelder oder gedrückt dargestellte Schaltflächen.
Wozu dienen Rahmenbreite, Eckenradius und Rahmenfarbe?
Diese Einstellungen betreffen das Vorschau-Element selbst, nicht den Schatten.
Sie helfen dabei, den Schatten im Zusammenspiel mit abgerundeten Ecken oder einem sichtbaren Rahmen realistisch zu beurteilen.
CSS-Code und Technik
Wie ist der box-shadow-Code aufgebaut?
box-shadow: 10px 10px 25px 0px rgba(0, 0, 0, 0.5);
Wozu dienen die Vendor-Prefixes -webkit- und -moz-?
Sie waren früher nötig, damit ältere Versionen von Chrome und Safari („-webkit-„) sowie Firefox („-moz-„) Schatten darstellen konnten. Aktuelle Browser unterstützen „box-shadow“ ohne Präfix.
Für moderne Projekte sind die Präfixe in der Regel nicht mehr erforderlich, weshalb sich die Option im Tool aus- oder einschalten lässt.
Kann ich mehrere Schatten an einem Element kombinieren?
Ja. In CSS lassen sich mehrere Schatten durch Kommas trennen, etwa ein äußerer und ein innerer Schatten am selben Element.
Der Generator erzeugt jeweils einen einzelnen Schatten; für Mehrfachschatten werden mehrere erzeugte Werte einfach mit Komma aneinandergereiht.
Wie unterscheiden sich box-shadow und drop-shadow?
„box-shadow“ folgt immer dem rechteckigen Rahmen eines Elements. „filter: drop-shadow()“ richtet sich dagegen nach der tatsächlichen Form des Inhalts, zum Beispiel bei transparenten PNG-Grafiken oder freigestellten Formen.
Für klassische, rechteckige Boxen ist daher „box-shadow“ die passende Wahl.
Wie kopiere ich den Code und wo füge ich ihn ein?
Über die Schaltfläche „Copy“ wird der angezeigte CSS-Code in deine Zwischenablage übernommen.
Anschließend wird er in die CSS-Regel des gewünschten Elements eingefügt, etwa in ein Stylesheet, den Theme-Customizer oder ein CSS-Feld eines Seiten-Baukastens.
Kompatibilität und Praxis
Welche Browser unterstützen box-shadow?
„box-shadow“ wird von allen aktuellen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Die Eigenschaft gehört seit vielen Jahren zum festen CSS-Standard.
Wirken sich Schatten auf die Performance aus?
Im Normalfall ist der Einfluss nicht spürbar. Sehr große Weichzeichnungswerte oder viele gleichzeitig animierte Schatten können die Darstellung jedoch belasten.
Soll ein Schatten animiert werden, ist es oft effizienter, die Deckkraft eines Pseudo-Elements zu verändern, anstatt „box-shadow“ direkt zu animieren.
Kann ich farbige Schatten oder Neon-Effekte erzeugen?
Ja. Über den Farbwähler für die Schattenfarbe lässt sich jede beliebige Farbe einstellen.
In Verbindung mit einer geringen Ausbreitung und einer stärkeren Weichzeichnung entsteht ein Leucht- beziehungsweise Neon-Effekt.
Werden meine Eingaben an einen Server übertragen?
Nein. Die Berechnung des Schattens findet vollständig im Browser statt. Für die Nutzung des Generators auf Nioveo werden keine Eingaben an einen Server gesendet.