CSS-Box-Shadow-Generator

Die CSS-Eigenschaft `box-shadow` fügt einem HTML-Element einen oder mehrere Schatteneffekte hinzu. Jeder Schatten wird durch bis zu sechs Werte definiert: ein optionales `inset`-Schlüsselwort, einen horizontalen Versatz, einen vertikalen Versatz, einen Unschärfe-Radius, einen Ausbreitungs-Radius und eine Farbe. Positive horizontale Versätze schieben den Schatten nach rechts; positive vertikale Versätze nach unten. Mehrere Schatten werden durch Kommas getrennt und von vorne nach hinten gerendert. Es ist der primäre CSS-Mechanismus zum Hinzufügen von visueller Tiefe, Elevationshierarchie, Leuchteffekten und neumorphem Styling zu UI-Komponenten ohne jegliche Bilder.

Die vollständige Syntax lautet: `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`. Nur `offset-x`, `offset-y` und `color` sind erforderlich; `blur-radius` und `spread-radius` haben den Standardwert 0, wenn sie weggelassen werden, und `inset` hat standardmäßig einen äußeren Schatten. Ein typischer Karten-Schatten sieht so aus: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`. Stapeln Sie beliebig viele Schatten, indem Sie sie durch Kommas trennen — sie werden von vorne nach hinten gerendert (erstgenannter liegt oben). Dieser Generator gibt die vollständige Deklaration einschließlich des `box-shadow:`-Eigenschaftsnamens aus, oder nur den Wert, wenn Sie das bevorzugen.

Der Unschärfe-Radius steuert die Kantenweichheit: Null ergibt eine harte, klare Kante, die genau der Elementform entspricht; größere Werte erzeugen ein zunehmend weicheres, diffuseres Ausblenden. Der Ausbreitungs-Radius vergrößert oder verkleinert den gesamten Schatten, bevor die Unschärfe angewendet wird: positive Werte dehnen ihn über die Elementgrenze hinaus, negative Werte ziehen ihn nach innen zusammen. Die realistisch wirkenden Schatten verwenden eine moderate Unschärfe mit einem leicht negativen Ausbreitungswert, der den Schatten nahe am Fußabdruck des Elements hält, anstatt sich zu weit auszubreiten. Dies ist die Technik der Deep- und Floating-Presets.

Fügen Sie das `inset`-Schlüsselwort am Anfang der Schatten-Deklaration hinzu: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`. Ein Inset-Schatten wird innerhalb der Rahmen-Box des Elements gezeichnet anstatt dahinter, wodurch ein versenktes oder eingedrücktes Erscheinungsbild entsteht. Häufige Verwendungen sind: Eingabefelder (zeigen Fokustiefe), Umschalter-Spuren, Schaltflächen-Aktivzustände und geprägte Textcontainer. Dieser Generator hat einen Inset-Schalter im Bedienfeld jeder Ebene — aktivieren Sie ihn und der Schatten wechselt sofort in der Vorschau nach innen.

Ja — CSS erlaubt eine beliebige Anzahl von durch Kommas getrennten Schatten auf einem einzelnen Element. Sie werden in der aufgeführten Reihenfolge gerendert, wobei der erste Schatten oben liegt. Das Stapeln mehrerer Ebenen ist die Schlüsseltechnik für weiche, realistische Tiefe — ein einzelner großer Schatten sieht künstlich aus, während drei bis fünf abgestufte Ebenen nachahmen, wie Licht physikalisch streut. Dieser Generator unterstützt bis zu acht unabhängige Ebenen, jede mit eigenem Versatz, Unschärfe, Ausbreitung, Farbe, Deckkraft und Inset-Schalter. Ein Auge-Symbol ermöglicht das Ein-/Ausblenden einzelner Ebenen für schnellen Vorher-Nachher-Vergleich ohne Löschen.

Neumorphismus verwendet zwei entgegengesetzte Schatten auf einem Element, dessen Hintergrundfarbe der Seitenfarbe entspricht: einen hellen (nahezu weißen) Schatten oben links und einen dunklen (schwarzen mit geringer Deckkraft) unten rechts. Dadurch erscheint das Element aus dem Hintergrund herausgedrückt. Eine klassische neumorphische Deklaration: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`. Der Hintergrund des Elements muss genau mit dem Seitenhintergrund übereinstimmen, damit die Illusion funktioniert. Das Neumorphic-Preset in diesem Generator bietet einen fertigen Ausgangspunkt — wechseln Sie den Vorschauhintergrund zu 'Soft Grey', um es im Kontext zu sehen.

Verwenden Sie Null-Versatz, einen großen Unschärfe-Radius und einen farbigen Wert: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`. Null-Versatz lässt das Leuchten gleichmäßig in alle Richtungen abstrahlen. Eine positive Ausbreitung schiebt das Leuchten weiter vom Element weg. Die Kombination zweier Ebenen — eine mit kleinerem Unschärfewert und höherer Deckkraft für einen hellen Kern und eine mit großer Unschärfe und geringerer Deckkraft für den Umgebungs-Halo — erzeugt einen überzeugenden Leuchteffekt. Das Glow-Blue-Preset demonstriert dies mit einem Zwei-Ebenen-Ansatz. Ändern Sie die Farbe für benutzerdefinierte Akzentleuchten.

Statt eines großen Schattens stapeln Sie drei bis fünf Ebenen, bei denen sich Versatz und Unschärfe jeweils etwa verdoppeln, während die Deckkraft halbiert wird: zum Beispiel `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`. Diese Technik ahmt nach, wie Licht physikalisch von einer Punktquelle streut und bleibt bei jedem Zoom-Level und jeder Bildschirmauflösung überzeugend. Die Deep- und Floating-Presets in diesem Generator basieren genau auf diesem Prinzip — drei abgestufte Ebenen, die in jeder Größe natürlich wirken.

`box-shadow` folgt immer der rechteckigen Rahmen-Box des Elements, unabhängig davon, wie das Element visuell aussieht. `filter: drop-shadow()` verfolgt den tatsächlichen Alpha-Kanal-Umriss des Elements — nützlich für transparente PNG-Ausschnitte oder SVG-Icons, bei denen der Schatten der Form statt ihrem Begrenzungsrechteck folgen soll. Für Standard-UI-Komponenten (Karten, Schaltflächen, Panels, Dialoge) ist `box-shadow` korrekt: es ist schneller zu zeichnen, unterstützt den Inset-Modus, akzeptiert einen Ausbreitungs-Radius und erlaubt mehrere gestapelte Ebenen. Verwenden Sie `filter: drop-shadow()` nur dann, wenn der transparente Hintergrund des Elements für die Schattenform wichtig ist.

Nein. `box-shadow` ist ein rein visueller Effekt, der außerhalb des normalen Layout-Flusses gerendert wird. Er verschiebt niemals Geschwisterelemente, vergrößert niemals den scrollbaren Inhaltsbereich und hat keinen Einfluss auf die berechnete Breite, Höhe, Rand oder den Innenabstand des Elements. Schatten erstrecken sich visuell über die Box des Elements hinaus, werden jedoch von der Layout-Engine ignoriert. Das bedeutet, dass Sie großzügige Schatten zu einem eng gepackten Raster hinzufügen können, ohne das Layout zu beeinträchtigen — obwohl Sie möglicherweise `overflow: visible` zum übergeordneten Container hinzufügen möchten, um sicherzustellen, dass der Schatten nicht abgeschnitten wird.

Sobald Sie Ihren Schatten erstellt haben, bietet der Generator drei Ausgabeformate. <strong>CSS kopieren</strong> gibt die vollständige Property-Deklaration (`box-shadow: …;`) bereit für jedes Stylesheet. <strong>Wert kopieren</strong> gibt nur den Schatten-Wert — nützlich als SCSS-Variable, CSS-Custom-Property-Wert oder Tailwind-`extend.boxShadow`-Eintrag. <strong>React-Style</strong> gibt das camelCase-Format (`boxShadow: '…'`) für JSX-Inline-Style-Objekte oder Styled Components aus. Für Tailwind fügen Sie den Wert in Ihre `tailwind.config.js` unter `theme.extend.boxShadow` ein, um eine benutzerdefinierte Schatten-Utility-Klasse zu erstellen.

Die meisten dedizierten Box-Shadow-Tools bieten nur einschichtige Generierung — cssgenerator.org beispielsweise bietet grundlegende Steuerelemente, aber keine Preset-Bibliothek und kein Mehrschicht-Stapeln. Die Referenz auf css-tricks.com ist Dokumentation, kein interaktives Tool. CSS Generators auf cssmatic.com sind funktional, aber veraltet und anzeigenreich. UtiloKits Generator unterstützt bis zu acht unabhängige Ebenen mit Pro-Ebene-Augen-Schaltern, acht kuratierte Presets für die häufigsten Schatten-Design-Muster (Karte, Knackig, Material, Neumorphisch, Floating, Deep, Leuchten, Inset Well), drei Ausgabeformate für verschiedene Frameworks und einen vollständigen Dunkel/Hell-Hintergrund-Schalter zur Kontrastprüfung — alles werbefrei ohne Daten-Upload.

Ja — der Box-Shadow-Generator ist vollständig responsiv. Auf iPhone und Android sind alle Regler berührungsfreundlich mit angemessen großen Ziehgriffen. Das Live-Vorschau-Element skaliert sich für mobile Bildschirme. Farbwähler verwenden den nativen System-Farbwähler auf mobilen Browsern. Das Drei-Spalten-Desktop-Layout reduziert sich auf ein übersichtliches einspaltiges vertikales Layout auf schmalen Bildschirmen. Alle Kopierschaltflächen verwenden die Web Clipboard API, die auf Safari, Chrome und Firefox auf iOS und Android unterstützt wird. Kein App-Download erforderlich, kein Konto nötig — öffnen Sie die URL und beginnen Sie sofort.