Toolipedia Einbetten
DE
← Alle Text-Tools

CSS-Box-Shadow-Generator

Gestalten Sie Box-Schatten mit Reglern und Live-Vorschau und kopieren Sie dann das CSS.

  • Kostenlos
  • Ohne Anmeldung
  • Funktioniert auf jedem Gerät

Über CSS-Box-Shadow-Generator

Passen Sie Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft in einer Live-Vorschau an und kopieren Sie die box-shadow-Deklaration. Die Werte lauten in dieser Reihenfolge x-Versatz, y-Versatz, Unschärferadius, Ausbreitungsradius und Farbe. Mit inset zeichnen Sie den Schatten innerhalb des Kastens. Halten Sie die Deckkraft niedrig, damit das Ergebnis natürlich wirkt.

So verwenden Sie CSS-Box-Shadow-Generator

  1. Bewege die Regler für Versatz, Unschärfe, Ausbreitung und Deckkraft.
  2. Wähle die Schattenfarbe und beobachte die Live-Vorschau.
  3. Kopiere das box-shadow-CSS in dein Stylesheet.

Warum dieses Tool?

Auch bekannt als

Häufig gestellte Fragen

Was bewirkt der Spread-Wert bei box-shadow?

Die Ausbreitung (Spread) vergrößert oder verkleinert den Schatten, bevor die Unschärfe angewendet wird. Ein positiver Wert macht ihn größer als den Kasten, ein negativer kleiner, was sich für Schatten nur auf einer Seite eignet.

Wie füge ich mehr als einen Schatten hinzu?

CSS erlaubt mehrere durch Kommas getrennte Schatten. Baue jeden einzeln und kombiniere sie dann in einer box-shadow-Zeile, um eine weichere, realistischere Tiefe zu erhalten.

Was bewirkt die Inset-Option?

Inset zeichnet den Schatten innerhalb statt außerhalb des Kastens. Es ist nützlich für gedrückte Schaltflächen, Eingabefelder und eingesunkene Panels.

Ist CSS-Box-Shadow-Generator kostenlos?

Ja. CSS-Box-Shadow-Generator auf Toolipedia ist kostenlos nutzbar, ohne Anmeldung und ohne Wasserzeichen.

Ist die Nutzung sicher?

Ja. Alles wird in Ihrem Browser berechnet, und nichts von Ihren Eingaben wird an unseren Server gesendet.

Funktioniert es auf meinem Smartphone?

Ja. Es funktioniert in jedem modernen Browser auf Android und iPhone sowie auf Tablets und Computern. Sie müssen nichts installieren.

Brauche ich ein Konto?

Nein. Öffnen Sie einfach die Seite und nutzen Sie das Tool. Keine Anmeldung, keine E-Mail-Adresse nötig.

Kann ich CSS-Box-Shadow-Generator auf meiner eigenen Website einsetzen?

Ja. Nutze unter dem Tool die Schaltfläche „Auf deiner Website einbetten“, um ein kurzes Stück Code zu kopieren und in deine Seite einzufügen. Es ist kostenlos, braucht kein Konto, und das Tool funktioniert weiter innerhalb deiner Seite.

Ähnliche Tools