Box-Shadow-Generator

Ein CSS-Box-Shadow besteht aus fünf Teilen, und jeder Regler in diesem Tool entspricht einem davon. Der X-Versatz verschiebt den Schatten nach links oder rechts, der Y-Versatz nach oben oder unten, sodass ein positiver Y-Wert den Schatten wie bei Licht von oben unter das Element fallen lässt. Der Unschärferadius bestimmt, wie weich die Kante ist: null ergibt eine harte, scharfe Linie, ein größerer Wert breitet sie zu einem diffusen Schleier aus. Die Ausbreitung (Spread) vergrößert oder verkleinert den Schatten, bevor die Unschärfe angewendet wird. Farbe wird zusammen mit ihrer Deckkraft als rgba()-Wert ausgegeben, sodass die Transparenz direkt eingebacken ist. Ein sechstes Schlüsselwort, inset, dreht den ganzen Schatten nach innen für einen gedrückten Look. Stelle oben jeden Regler ein, und die Live-Vorschau aktualisiert sich sofort, sodass du genau siehst, wie sich ein Wert auf das Ergebnis auswirkt, bevor du den Code kopierst.

In CSS setzt du mehrere Schatten in eine box-shadow-Regel, getrennt durch Kommas, und sie werden von hinten nach vorne gerendert, sodass der erste Schatten oben liegt. Dieses Tool übernimmt das für dich: Du fügst eine neue Ebene hinzu, und es verwaltet die durch Kommas getrennte Syntax automatisch. Layering ist der Weg, um realistische Tiefe zu erzeugen, denn ein einzelner Schatten wirkt flach, während zwei oder drei mit unterschiedlichem Versatz, Unschärfe und Deckkraft nachbilden, wie Licht tatsächlich fällt. Du kannst Ebenen neu ordnen, eine als Ausgangspunkt duplizieren und jede Ebene ein- oder ausblenden, um Looks zu vergleichen, ohne sie zu löschen. Die Material-Elevation-Presets nutzen genau diesen Ansatz und stapeln pro Stufe zwei oder drei Ebenen, wie es Googles Spezifikation vorsieht. Baue deinen Stapel mit den Ebenen-Reglern oben auf und kopiere die kombinierte Regel mit einem Klick.

Die Ausbreitung (Spread) vergrößert oder verkleinert einen Schatten, bevor die Unschärfe angewendet wird. Eine positive Ausbreitung macht den Schatten größer als das Element, eine negative zieht ihn nach innen zusammen, sodass er enger darunterliegt. Negative Ausbreitung ist der Trick hinter modernen Card-Schatten: Indem du den Schatten einziehst und ihn mit einem kleinen Y-Versatz nach unten schiebst, entsteht ein weicher Schattenpool direkt unter der Karte statt eines diffusen Halos, der auf allen Seiten austritt. Das wirkt wie eine dezente, geerdete Erhebung statt eines altbackenen Schlagschattens. Eine Farbe mit niedriger Deckkraft kombiniert mit negativer Ausbreitung und moderater Unschärfe ist das Rezept, das die meisten Design-Systeme für saubere, angehobene Karten verwenden. Der Spread-Regler hier reicht von -50px bis 50px — stelle also einen negativen Wert ein, beobachte, wie sich die Vorschau strafft, und kopiere das Ergebnis direkt in dein Stylesheet.

Neumorphismus, auch Soft UI genannt, ist ein Stil, bei dem Elemente aus dem Hintergrund herausgeformt wirken, statt darüber zu schweben, als wären sie aus demselben Material herausgedrückt. Der Effekt braucht zwei Schatten auf derselben Oberflächenfarbe: einen dunklen Schatten auf einer Seite und ein helles Highlight auf der gegenüberliegenden, sodass das Element sanft erhaben wirkt. Dieses Paar von Hand richtig hinzubekommen ist knifflig, weil beide Schatten von derselben Basisfarbe abgeleitet sein müssen. Der eigene Neumorphismus-Modus dieses Tools übernimmt die Berechnung für dich: Du legst Basisfarbe, Intensität, Distanz und Unschärfe fest, und es berechnet automatisch das passende helle und dunkle Schattenpaar. Du kannst es auf einer Karte, einem Button oder einem Avatar ansehen und zwischen hellem und dunklem Hintergrund wechseln, um den Kontrast zu prüfen. Öffne oben den Soft-UI-Modus, stelle die Basisfarbe ein und kopiere das erzeugte Schattenpaar.

Ja. Der Generator erzeugt denselben Schatten in fünf kopierfertigen Formaten, sodass er direkt in deinen Stack passt. Du erhältst reines CSS als fertige box-shadow-Regel zum Einfügen, eine Tailwind-Arbitrary-Value-Klasse in der Form shadow-[...], eine SCSS-Variable, die du über mehrere Partials hinweg wiederverwenden kannst, ein styled-components-Template-Literal für CSS-in-JS sowie Design-Tokens als JSON im Standard-Token-Format für Design-System-Pipelines. Du kannst die vollständige Regel kopieren, nur den reinen Wert kopieren, wenn du lediglich den Teil nach der Eigenschaft brauchst, oder das Ergebnis als Datei herunterladen. Ein integrierter Verlauf speichert bis zu 20 deiner letzten Zustände, sodass du zu einer früheren Version zurückspringen kannst, ohne deine Arbeit zu wiederholen. Baue oben den gewünschten Schatten, wähle das Format, das zu deinem Projekt passt, und schnapp dir den Code mit einem Klick.