CSS-Schatten-Generator

CSS-box-shadows visuell bauen

100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.

Schatteneinstellungen

Preview Box
box-shadow: 4px 8px 24px 0px rgba(0, 0, 0, 0.25);

Jump to the next useful tool without leaving your flow.

See more

Über dieses Tool

Gestalte eine CSS-box-shadow visuell – Offset, Blur, Spread, Farbe und Deckkraft mit Live-Vorschau anpassen – und erzeugt die exakte CSS-Syntax zum Kopieren, statt Werte für die notorisch fummelige box-shadow-Property von Hand zu raten.

So verwendest du dieses Tool

  1. Basis-Schattenstil wählenStarte mit äußerem oder inset Schatten je nach Komponententyp.
  2. Offset und Blur abstimmenPasse X/Y-Offset und Blur-Radius an, bis die Tiefe natürlich wirkt.
  3. Spread und Deckkraft setzenSteuere Kantensoftheit und Intensität für subtile oder starke Elevation.
  4. CSS-Deklaration kopierenNutze den erzeugten `box-shadow`-Wert direkt in deinem Stylesheet.

So funktionieren die box-shadow-Werte

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15) bedeutet: kein horizontaler Versatz, 4px nach unten, 12px Unschärfe, keine Ausdehnung und ein schwarzer Schatten mit 15 % Deckkraft. Mit inset am Anfang liegt der Schatten innerhalb des Elements.

Weiche, realistische Schatten kombinieren meist zwei durch Komma getrennte Ebenen: eine kleine, dunklere nah am Element und eine größere, hellere weiter weg.

Warum es nutzen

  • Erzeugt präzise Schatten schneller als manuelles Ausprobieren.
  • Live-Vorschau macht Tiefenabstimmung intuitiv.
  • Hilft, Elevation-Stile über Komponenten hinweg zu standardisieren.
  • Gibt saubere, kopierfertige CSS-Werte aus.

Häufige Anwendungen

  • Karten-Elevation und Modal-Tiefeneffekte gestalten.
  • Konsistente Hover-Zustände für interaktive Elemente bauen.
  • Produkt-UI-Schatten an Design-Specs anpassen.
  • Neumorphe oder weich geschichtete visuelle Stile erstellen.

Tipps für bessere Ergebnisse

  • Nutze niedrigere Deckkraft mit etwas höherem Blur für realistische Tiefe.
  • Staple zwei subtile Schatten für sauberere moderne UI-Elevation.
  • Passe die Schattenrichtung an deine angenommene Lichtquelle an.
  • Prüfe das Dark-Mode-Schattenbild getrennt vom Hellmodus.

Fehler, die du vermeiden solltest

  • Harte schwarze Schatten nutzen, die UI alt aussehen lassen.
  • Identische Schatten auf jede Komponente anwenden, unabhängig von der Hierarchie.
  • Spread-Werte übernutzen, die matschige Grenzen erzeugen.
  • Dark-Theme-Abstimmung überspringen, wo Schatten verschwinden oder schmutzig wirken können.

Häufig gestellte Fragen

Wenn das Tool mehrere Schattenebenen unterstützt, kannst du mehrere Schatten für komplexere Tiefeneffekte stapeln – das ist gültige CSS-box-shadow-Syntax (kommagetrennte Schattenwerte).

Ja, typischerweise – wechsle zwischen einem Standard-Drop-Shadow und einem Inset-Schatten, der innerhalb des Elementrands erscheint statt außerhalb.

box-shadow ist in allen modernen Browsern gut unterstützt, ohne Vendor-Prefixes zu brauchen, das erzeugte CSS sollte also konsistent funktionieren.

Nutz zwei oder drei geschichtete Schatten mit zunehmender Unschärfe und abnehmender Deckkraft und leichtem Versatz nach unten, statt eines großen dunklen Schattens. Schwarz mit niedriger Deckkraft oder ein dunkler Ton der Hintergrundfarbe wirkt natürlicher als reines Grau.

box-shadow folgt dem rechteckigen Rahmen des Elements (und seinem border-radius); filter: drop-shadow() folgt der sichtbaren Form, auch bei transparenten PNG- und SVG-Umrissen. Nimm drop-shadow für Icons und freigestellte Bilder.

Statische Schatten kosten wenig. Große, unscharfe Schatten auf vielen Elementen zu animieren kann ruckeln; animiere stattdessen die Deckkraft eines Pseudo-Elements, das den Schatten trägt.