CSS-Box-Shadow-Generator

Stellen Sie Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft mit Live-Reglern ein, sehen Sie das Ergebnis auf einer hellen oder dunklen Fläche und kopieren Sie sauberes box-shadow-CSS – alles direkt in Ihrem Browser.

Vorschau

Schatten

X-Versatz

Y-Versatz

Weichzeichnung

Ausbreitung

Farbe

#0a0a0a

Deckkraft

CSS

box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);

So verwenden Sie CSS-Box-Shadow-Generator

1
Versatz festlegen
Verschieben Sie den Schatten mit den Reglern für X- und Y-Versatz nach links, rechts, oben oder unten. Ein positiver Y-Wert legt den Schatten unter das Element, ein negativer hebt ihn darüber.
2
Den Schatten formen
Erhöhen Sie die Weichzeichnung für einen weichen, diffusen Rand oder halten Sie sie gering für einen scharfen Schatten. Die Ausbreitung vergrößert oder verkleinert den Schatten, bevor die Weichzeichnung angewendet wird.
3
Farbe und Deckkraft wählen
Klicken Sie auf das Farbfeld, um eine Schattenfarbe zu wählen, und stellen Sie dann die Deckkraft ein. Weiche, dunkle Schatten mit niedriger Deckkraft wirken auf hellen Hintergründen am natürlichsten.

4
CSS kopieren
Schalten Sie inset ein, falls Sie einen inneren Schatten brauchen, betrachten Sie ihn auf einer hellen oder dunklen Fläche und kopieren Sie dann die box-shadow-Zeile in Ihr Stylesheet.

Häufig gestellte Fragen

Wie erstelle ich einen CSS box-shadow?

Stellen Sie den horizontalen und vertikalen Versatz, die Weichzeichnung und die Ausbreitung mit den Reglern ein, wählen Sie Farbe und Deckkraft, und das box-shadow-CSS wird darunter in Echtzeit erzeugt. Kopieren Sie es und fügen Sie es auf jedem beliebigen Element ein.

Was bedeutet jeder box-shadow-Wert?

Die Werte sind der horizontale Versatz, der vertikale Versatz, der Weichzeichnungsradius und der Ausbreitungsradius, gefolgt von der Farbe. Die Versätze verschieben den Schatten, die Weichzeichnung macht seinen Rand weicher, und die Ausbreitung ändert, wie groß der Schatten ist, bevor er weichgezeichnet wird.

Was ist ein Inset-Schatten?

Ein Inset-Schatten wird innerhalb des Elements statt dahinter gezeichnet, wodurch die Fläche eingedrückt oder vertieft wirkt. Schalten Sie zwischen Außen und Innen (inset) um, um zwischen einem äußeren und einem inneren Schatten zu wechseln.

Wie erzeuge ich einen weichen, natürlichen Schatten?

Verwenden Sie einen kleinen vertikalen Versatz, eine großzügige Weichzeichnung, eine leicht negative Ausbreitung und eine dunkle Farbe mit niedriger Deckkraft, etwa 10 bis 25 Prozent. Harte, vollständig deckende Schatten wirken meist künstlich.

Werden meine Daten auf einen Server hochgeladen?

Nein. Der Generator läuft vollständig in Ihrem Browser. Nichts wird hochgeladen, protokolliert oder gespeichert, sodass Ihre Arbeit privat bleibt und das Tool sogar offline weiterarbeitet.

CSS-Box-Shadow-Generator

So verwenden Sie CSS-Box-Shadow-Generator

Häufig gestellte Fragen

Verwandte Tools