CSS-Schatten-Generator

Der CSS-Schatten-Generator kombiniert bis zu fünf Schattenebenen mit einstellbarem Versatz, Weichzeichnung, Ausdehnung, Farbe und Deckkraft. Erstellen Sie weiche Kartenschatten, farbiges Leuchten oder innere Schatten und exportieren Sie CSS, eine Tailwind-Klasse oder PNG. Die Vorschau und der PNG-Export berücksichtigen auch innere Schatten und negative Ausdehnung.

Nur lokal

Vorlagen

Wählen Sie eine Vorlage, um alle Regler auf einmal zu setzen, und passen Sie sie dann an.

Hintergrundfarbe

Radius16pxDunkler UntergrundEin Schatten wirkt nur vor einem Untergrund – prüfen Sie das Paar auf beiden. Ein auf Weiß abgestimmter Schatten verschwindet auf fast schwarzer Fläche vollständig, und umgekehrt.

Ebenen

Ebene 1

Farbe 1

Verschiebung X0pxVerschiebung Y1pxWeichzeichnen3pxAusdehnung0pxDeckkraft0.18

Ebene 2

Farbe 2

Verschiebung X0pxVerschiebung Y12pxWeichzeichnen28pxAusdehnung-6pxDeckkraft0.14

Eine Vorlage setzt alle Regler mit einem Klick; Zufall tut dasselbe mit zufälligen Werten.

CSS

.box {
  border-radius: 16px;
  box-shadow:
    0px 1px 3px 0px rgb(11 11 18 / 0.18),
    0px 12px 28px -6px rgb(11 11 18 / 0.14);
}

Gestapelte Schatten erzeugen echte Tiefe: ein kurzer dunkler Schatten für die Kontaktkante, ein weiter weicher für den Umgebungslicht-Anteil. Ein einzelner großer Schatten wirkt wie ein Fleck um die Box statt wie Licht.

Tailwind-Klassen

rounded-[16px] shadow-[0px_1px_3px_0px_rgb(11_11_18_/_0.18),0px_12px_28px_-6px_rgb(11_11_18_/_0.14)]

Beliebige Werte, damit jede Zahl exakt ist – keine davon wird auf die nächste Skalenstufe gerundet.

Wie funktioniert CSS-Schatten-Generator?

Ein `box-shadow` besteht aus horizontalem und vertikalem Versatz, Weichzeichnungsradius, Ausdehnung und Farbe. Mehrere durch Kommas getrennte Einträge werden übereinander gezeichnet. Ein kurzer, dunkler Schatten kann die Kontaktkante betonen, ein breiter, schwächerer Schatten die Tiefe.

Die Ausdehnung verändert die Größe der Schattenform vor dem Weichzeichnen. Positive Werte vergrößern sie, negative Werte verkleinern sie. `inset` verlegt den Schatten in das Innere der Box; die erste CSS-Ebene liegt jeweils vor den späteren Ebenen.

Die SVG-Vorschau bildet jede Ebene mit Filtern nach, einschließlich innerer Schatten und negativer Ausdehnung. Der PNG-Download wird aus derselben SVG-Szene erzeugt. Das exportierte CSS und die Tailwind-Klasse enthalten die eingestellten Werte für die Verwendung auf Ihrer Website.

Farbige Schatten ohne Versatz eignen sich für Leuchteffekte. Halten Sie die Anzahl und Größe der Ebenen so klein wie für das gewünschte Ergebnis nötig und prüfen Sie die Darstellung auf hellen und dunklen Hintergründen. Große weichgezeichnete Flächen können zusätzliche Zeichenarbeit verursachen.

Schattenebenen

Ebene 1 0 1px 3px 0 · #0b0b12 · 18%
Ebene 2 0 12px 28px -6px · #0b0b12 · 14%

Erzeugtes CSS

.box {
  border-radius: 16px;
  box-shadow: 0 1px 3px 0 rgb(11 11 18 / 0.18),
    0 12px 28px -6px rgb(11 11 18 / 0.14);
}

Welche Optionen und Sonderfälle unterstützt CSS-Schatten-Generator?

Technische Referenz und Optionen
Parameter	Typ	Standard	Verhalten & Sonderfälle
Versatz X / Y	px	0 / 1	Verschiebt den Schatten horizontal und vertikal. Positive Werte verschieben ihn nach rechts beziehungsweise unten.
Weichzeichnung	px	3	Bestimmt die Weichheit der Schattenkante. Höhere Werte verteilen den Schatten über eine größere Fläche.
Ausdehnung	px	0	Vergrößert oder verkleinert die Schattenform vor dem Weichzeichnen. Negative Werte können einen breiten Schatten enger unter der Box halten.
Farbe und Deckkraft	RGB mit Alpha	dunkel mit 18 % Deckkraft	Bestimmt die Farbe und Stärke der Ebene. Passen Sie die Deckkraft an die Hintergrundfarbe und den gewünschten Effekt an.
Innerer Schatten	inset	inaktiv	Zeichnet die Ebene innerhalb der Box. Innere Schatten sind auch in der SVG-Vorschau und im PNG-Download enthalten.
Ebenen	1–5, durch Kommas getrennt	2	Die erste Ebene der CSS-Liste liegt vor den späteren Ebenen. Aktivierte Ebenen werden in dieser Reihenfolge exportiert.
border-radius	px	16	Rundet die Box und die zugehörigen Schattenkonturen. Der Wert wird auch in den Export übernommen.

Häufig gestellte Fragen

Wie erstelle ich einen weichen, natürlichen Kartenschatten?

Kombinieren Sie eine kurze Kontaktkante mit einer breiteren, schwächeren Ebene, etwa `box-shadow: 0 1px 3px rgb(0 0 0 / 0.18), 0 12px 28px -6px rgb(0 0 0 / 0.14)`. Passen Sie Deckkraft und Ausdehnung an den Hintergrund und die Größe der Karte an.

Was bewirkt die Ausdehnung eines Schattens?

Der Wert `spread` vergrößert oder verkleinert die Schattenform, bevor sie weichgezeichnet wird. Positive Werte lassen den Schatten weiter hervortreten; negative Werte halten ihn enger unter der Box.

Wie füge ich einem Button einen Leuchteffekt hinzu?

Verwenden Sie eine helle Schattenfarbe mit wenig oder keinem Versatz. Eine enge, stärkere und eine breite, schwächere Ebene ergeben zum Beispiel `box-shadow: 0 0 8px rgb(255 122 69 / 0.7), 0 0 32px 4px rgb(255 122 69 / 0.35)`. Prüfen Sie den Effekt auf dem tatsächlichen Hintergrund.

Verändert `box-shadow` das Layout oder die Leistung?

Der Schatten vergrößert die Layoutbox nicht und verschiebt keine Nachbarelemente. Er kann jedoch sichtbar über die Box hinausragen, sofern er nicht abgeschnitten wird. Viele große, weichgezeichnete Ebenen können die Zeichenarbeit erhöhen; prüfen Sie das Ergebnis auf den Zielgeräten.

Sind innere Schatten im PNG enthalten?

Ja. Die SVG-Vorschau und der PNG-Export zeichnen sowohl äußere als auch innere Schatten und berücksichtigen negative Ausdehnung. Das PNG ist ein Bild der Vorschau, während CSS und Tailwind den Effekt auf Ihre eigene Box anwenden.

Wie viele Schattenebenen braucht eine Karte?

Oft reichen zwei: eine kurze Kontaktkante und eine breitere, schwächere Ebene für die Tiefe. Verwenden Sie weitere Ebenen nur, wenn sie das Ergebnis sichtbar verbessern. Das Tool erlaubt bis zu fünf Ebenen.

ToolsByUs-Team · Wie wir unsere Tools prüfen