jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS-Box-Shadow-Builder

Erstelle box-shadow CSS visuell durch Anpassen von Offset, Blur, Spread und Farbe.

Tool wird geladen...

Was ist CSS-Box-Shadow-Builder?

box-shadow ist eine der am haufigsten verwendeten CSS-Eigenschaften zum Hinzufugen von Tiefe und Hohe zu Elementen, aber ihre Multi-Value-Syntax kann verwirrend sein, insbesondere bei der Kombination von Offset, Unscharke, Ausbreitung, Farbe und dem inset-Schlusselwort. Dieses Tool macht die Eigenschaft visuell, indem es eine Live-Vorschau zeigt, wahrend Sie jeden Wert anpassen, sodass Sie genau sehen konnen, wie sich der Schatten verhalt, bevor Sie ihn zu Ihrem Stylesheet hinzufugen.

Kurze Antwort

Generieren Sie eine box-shadow-Deklaration durch Anpassen von Offset, Unscharke, Ausbreitung, Farbe und Inset. Die Live-Vorschau zeigt den Schatten auf einem statischen Div, sodass Sie die Werte abstimmen konnen, bevor Sie sie zu Ihrem Stylesheet hinzufugen.

Last updated: 2026-06-11

Einschränkungen

  • Die Vorschau ist ein statisches Div ohne umgebenden Kontext. Ein Schatten, der isoliert korrekt aussieht, kann vor einem echten Seitenhintergrund oder in der Nahe anderer Elemente anders erscheinen.
  • Das Tool generiert jeweils einen Schatten. Fur mehrschichtige oder mehrere Schatten mussen Sie die Werte manuell in Ihrem Stylesheet kombinieren.
  • Die box-shadow-Eigenschaft erzeugt Schatten, die der Element-CSS-Box folgen, nicht der sichtbaren Form. Fur nicht-rechteckige Elemente mit transparenten Hintergrunden oder CSS-clip-path-Formen verwenden Sie den drop-shadow-Filter fur einen Schatten, der den sichtbaren Konturen folgt.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Passen Sie den horizontalen und vertikalen Offset an, um die Schattenposition zu verschieben.
  2. Stellen Sie den Unscharkeradius und die Ausbreitung ein, um Weichheit und GroBe zu steuern.
  3. Wahlen Sie eine Schattenfarbe und schalten Sie Inset um, wenn der Schatten innerhalb des Elements erscheinen soll.
  4. Kopieren Sie die generierte CSS-Deklaration und fugen Sie sie in Ihr Stylesheet ein.

Wofür du es nutzen kannst

  • Subtile Hohe zu Karten, Modalen und Dropdown-Menus hinzufugen.
  • Inset-Gedruckt-Effekte fur Schaltflachen und Formularfelder erstellen.
  • Mehrschichtige Schatten durch Kombinieren mehrerer box-shadow-Werte fur realistische Tiefe erstellen.

Anwendungsfalle

Praxisbeispiele

Beispiel

Subtiler Kartenschatten

Eine Kartenkomponente benotigt einen leichten box-shadow, um sie von der Seite abzuheben. Ein kleiner Offset und eine Unscharke mit einem niedrig-opaken Schwarz erzeugen einen sauberen Material-Design-Schatten.

Beispiel

Inset-Formularfeldschatten

Ein Texteingabefeld kann einen Inset-Schatten verwenden, um Tiefe innerhalb des Feldes anzudeuten. Das Tool schaltet das inset-Schlusselwort um, sodass der Schatten innerhalb der Elementgrenze gerendert wird.

Haufige Fehler

  • Einen Farbwert hinzuzufugen zu vergessen, was dazu fuhren kann, dass der Schatten als Schwarz oder mit unerwarteten Browser-Standardwerten gerendert wird.
  • Einen zu groBen Unscharkeradius zu verwenden, der den Schatten auf kleinen Elementen fast unsichtbar macht.
  • Nicht zu prufen, ob das inset-Schlusselwort das erwartete innere Schattenverhalten auf dem Ziel-Element erzeugt.

Überprüfung

  1. Fugen Sie das generierte CSS in Ihre tatsachliche Seite ein und uberprufen Sie den Schatten auf dem echten Element mit seinem Hintergrund und angrenzendem Inhalt.
  2. Testen Sie den Schatten bei verschiedenen ElementgroBen, um zu bestatigen, dass Unscharke und Ausbreitung wie erwartet skalieren.

FAQ

Fragen zu CSS-Box-Shadow-Builder

Was macht der Ausbreitungswert?

Die Ausbreitung vergroBert oder verkleinert die SchattengroBe. Ein positiver Wert macht den Schatten groBer, wahrend ein negativer Wert ihn verkleinert. Null Ausbreitung halt den Schatten gleich groB wie das Element.

Wie fuege ich mehrere Schatten hinzu?

Trennen Sie jede Schattendeklaration mit einem Komma. Der Builder kann einmal pro Schatten verwendet werden, dann kombinieren Sie die Werte in Ihrem Stylesheet.

Wann sollte ich stattdessen den drop-shadow-Filter verwenden?

Verwenden Sie den drop-shadow-CSS-Filter, wenn Sie einen Schatten benotigen, der der genauen Form eines Elements mit transparentem Hintergrund oder beschnittenen Ecken folgt. box-shadow folgt immer der Element-CSS-Box, wahrend drop-shadow der gerenderten Pixelkontur folgt.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren