CSS-Schatten

box-shadow mit Vorschau

Keine Datenbank: AIMRAN speichert weder deine Dateien noch Texte oder Ergebnisse

Was ist CSS-Schatten?

Mit diesem Generator gestaltest du Schatten für Buttons, Karten und Fenster deiner Website, ohne Code von Hand zu schreiben. Bewege die Schieberegler und sieh sofort, wie sich der Schatten verändert.

Du kannst mehrere Ebenen für realistischere Schatten kombinieren, von fertigen Stilen ausgehen und das Ergebnis als CSS oder als Tailwind-Klasse kopieren.

So funktioniert es

  1. Wähle einen Ausgangsstil: Weich, Erhaben, Scharf, Ebenen, Innen oder Glühen.
  2. Wähle eine Ebene und passe X- und Y-Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft an.
  3. Füge weitere Ebenen hinzu oder aktiviere „Innen (inset)“.
  4. Ändere den Eckenradius und den hellen oder dunklen Hintergrund der Vorschau.
  5. Kopiere das CSS oder die Tailwind-Klasse.

Vorteile

Technische Details

Erzeugt die CSS-Eigenschaft box-shadow mit der Syntax [inset] versatz-x versatz-y unschärfe ausdehnung farbe, in Pixeln und mit der Farbe als rgba() gemäß Deckkraft. Die Ebenen werden durch Kommas getrennt und der Reihe nach gezeichnet, die erste zuoberst. Die Ausgabe für Tailwind CSS nutzt einen beliebigen Wert shadow-[…], wobei Leerzeichen durch Unterstriche ersetzt werden. Die Vorschau wendet zusätzlich einen einstellbaren border-radius von 0 bis 60 px an. Die vordefinierten Stile kombinieren Kontakt- und Umgebungsschatten mit geringer Deckkraft oder Ebenen, die Versatz und Unschärfe verdoppeln, für einen natürlichen Höheneffekt.

Häufige Fragen

Wie füge ich in CSS einen Schatten hinzu?

Mit der Eigenschaft box-shadow, zum Beispiel box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); – das legt horizontalen und vertikalen Versatz, Unschärfe und Farbe fest.

Was ist ein Inset-Schatten?

Ein Innenschatten: Er wird innerhalb des Elements gezeichnet statt außerhalb, als wäre es eingedrückt. Aktiviert wird er mit dem Schlüsselwort inset.

Kann ein Element mehrere Schatten haben?

Ja, durch Kommas getrennt in box-shadow. Mehrere weiche Ebenen wirken realistischer als ein einzelner starker Schatten.

Wie nutze ich den Schatten in Tailwind?

Kopiere die Klasse aus dem Tailwind-Bereich, etwa shadow-[0px_4px_12px_0px_rgba(0,0,0,0.04)], und füge sie in das class-Attribut des Elements ein.

Was ist der Unterschied zwischen Unschärfe und Ausdehnung?

Die Unschärfe (blur) lässt den Rand des Schattens weich auslaufen. Die Ausdehnung (spread) vergrößert oder verkleinert ihn vor dem Weichzeichnen.

Weitere Tools: Entwickler