Kostenloser CSS-Box-Shadow-Generator

Der Reihe nach: inset (optional), X-Versatz, Y-Versatz, Weichzeichnungsradius, Spread-Radius und Farbe. Ein positiver X-Wert verschiebt den Schatten nach rechts, ein positiver Y-Wert nach unten. Eine Weichzeichnung von 0 ergibt eine harte Kante. Dieses Tool schreibt immer alle vier Längen in px, danach die Farbe.

Verwenden Sie einen kleinen Y-Versatz, eine große Weichzeichnung und geringe Deckkraft, mit Spread nahe 0. Ein guter Ausgangspunkt ist hier Y 6 px, Weichzeichnung 24 px und Deckkraft 12 %, was 0px 6px 24px 0px #0000001f ergibt. Fügen Sie für mehr Tiefe eine zweite, engere Ebene hinzu.

Die Weichzeichnung macht die Kante des Schattens weicher, und eine höhere Weichzeichnung lässt ihn über einen größeren Bereich auslaufen. Spread vergrößert oder verkleinert den Schatten vor der Weichzeichnung: Positiver Spread macht ihn größer als die Box, negativer kleiner. Hier reicht die Weichzeichnung von 0 bis 100 px und der Spread von -50 bis 50 px.

Klicken Sie auf Schattenebene hinzufügen. Jede Ebene erhält einen Tab und eigene Einstellungen, und der Code verbindet sie mit Kommas, jeweils eine pro Zeile. In CSS wird der erste Schatten in der Liste oben gezeichnet, daher liegt Ebene 1 über den anderen.

Wählen Sie die Ebene aus und aktivieren Sie Inset-Schatten. Der Code ergänzt das Schlüsselwort inset, und der Schatten wird innerhalb statt außerhalb der Box gezeichnet. Bei inset macht ein positiver Spread den Innenschatten dicker. Sie können Innen- und Außenebenen in einer Regel mischen.

Verwenden Sie zwei Ebenen mit gegensätzlichem Versatz: eine dunkle, etwa #000000 mit 15 % und X und Y bei 8 px, und eine weiße bei -8 px mit voller Deckkraft. Geben Sie dem Element und seinem übergeordneten Element denselben weichen Hintergrund. Die Vorschaukarte hier bleibt weiß, prüfen Sie das Ergebnis also auf Ihrer Seite.

box-shadow folgt der Box des Elements und seinen abgerundeten Ecken und unterstützt Spread und Inset. Der Filter drop-shadow() folgt der sichtbaren Form, etwa einer transparenten PNG-Datei oder einem SVG-Icon, kennt aber weder Spread noch Inset. Dieses Tool schreibt ausschließlich box-shadow.

Nein. Ein Schatten nimmt keinen Platz ein, daher verdrängt er keine anderen Elemente und ändert die Boxgröße nicht. Ein übergeordnetes Element mit overflow: hidden kann ihn abschneiden. Lassen Sie daher etwas Abstand um das Element, wenn Weichzeichnung oder Versatz groß sind.

Das Tool hängt die Deckkraft als zwei Hex-Ziffern an die Farbe an und funktioniert daher nur mit 6-stelligen Hex-Codes wie #1e293b. Kurze Codes wie #fff, Farbnamen und rgba() ergeben ungültiges CSS, und der Schatten verschwindet. Eine eingetippte Weichzeichnung unter 0 oder eine Deckkraft über 100 bewirkt dasselbe.

Nicht direkt, da die Ausgabe reines CSS ist. Setzen Sie in Tailwind die Werte in eine beliebige Schattenklasse und ersetzen Sie jedes Leerzeichen durch einen Unterstrich, wie in shadow-[0px_4px_12px_0px_#00000026], oder fügen Sie den vollständigen Wert als eigenen Schatten in Ihrem Theme hinzu.

Ja. Er ist kostenlos, ohne Konto und ohne Obergrenze für Schatten oder Ebenen. Ihre Werte bleiben in diesem Tab und werden nicht gespeichert, ein Neuladen stellt also den Standardschatten wieder her. Auf der Live-Seite zählt Google Analytics die Klicks auf CSS kopieren, nie die Schattenwerte.