CSS-Box-Shadow-Generator

Schatten erstellen und kopieren

1. Bearbeite horizontalen und vertikalen Versatz, Unschärfe, Ausbreitung, Farbe und Deckkraft jeder Ebene. Wähle einen inneren Schatten, wenn er innerhalb der Box erscheinen soll.
2. Füge Ebenen hinzu, dupliziere oder verschiebe sie, um das Ergebnis zu gestalten. Behalte 1–8 Ebenen; ein unvollständiges Feld oder ein Wert außerhalb der Grenzen dieses Editors löscht den aktuellen Code bis zur Korrektur.
3. Prüfe die Vorschau mit Einpassen oder in der 100%-Ansicht und kopiere dann die Deklaration. Füge sie in eine CSS-Regel für das Element ein, das du gestalten möchtest.

Jede Ebene verstehen

Positive horizontale und vertikale Versatzwerte verschieben einen Schatten nach rechts und unten. Unschärfe macht seine Kante weicher; bei null bleibt sie scharf. Die Ausbreitung ändert seine Größe statt seiner Weichheit.

Die Deckkraft gehört zur Farbe jedes Schattens, nicht zur gesamten Box. Ein Schatten mit 50 Prozent bleibt im Code exakt bei 50 Prozent; seine Farbe wird nicht in ein gerundetes Alpha-Byte umgewandelt.

Die erste Ebene liegt innerhalb ihrer Zeichenkategorie ganz vorn. Äußere Schatten bleiben hinter dem Hintergrund der Box, innere Schatten über diesem Hintergrund und unter dem Rahmen. Durch Verschieben von Zeilen lassen sich diese Kategorien nicht übergreifen.

Längen erlauben Punkt oder Komma und bis zu zwei Nachkommastellen; die Deckkraft erlaubt eine. Diese Eingabefelder haben editorseitige Grenzen und analysieren nicht jeden gültigen CSS-Ausdruck. Der erzeugte Code verwendet immer Dezimalpunkte.

Nützliche Schattenexperimente

Das Ausgangsbeispiel kombiniert einen kleinen weichen Schatten mit 0, 2, 4, 0 Pixeln und 12,5 Prozent Deckkraft mit einem breiteren Schatten mit 0, 8, 16, -4 Pixeln und 20 Prozent. Jede Zeile entspricht einem Codeeintrag.

Für einen scharfen, konturartigen Effekt verwende bei einer äußeren Ebene null Versatz, null Unschärfe und eine positive Ausbreitung. Es bleibt ein Schatten und keine exportierte Rahmeneigenschaft.

Probiere eine innere Ebene mit null Unschärfe und positivem Versatz aus, um ihre scharfe Innenkante zu prüfen. Ändere die Flächenfarbe und nutze die 100%-Ansicht, ohne die Schattendeklaration zu verändern.

Was die Vorschau zeigt

Dieser Editor erzeugt 1–8 sRGB-box-shadow-Ebenen in CSS-Pixeln. Er importiert kein CSS, erzeugt keine Filter-drop-shadow-Schatten, wählt keinen Selektor und exportiert weder ein vollständiges Stylesheet noch ein Bild.

Boxgröße, undurchsichtige Farben und Eckenradius der Vorschau dienen nur als Kontext. Die Geometrie und der Hintergrund deines Elements können das Aussehen derselben Deklaration verändern.

Einpassen skaliert die gesamte Vorschau. Nutze die scrollbar angezeigte 100%-Ansicht für eine genauere Betrachtung. Der Vorschaubereich ist begrenzt und kann Unschärfeausläufer abschneiden; Browser und Displays müssen keine identischen Pixel zeichnen.

Ein transparenter oder zusammengefallener Schatten kann gültig, aber unsichtbar sein. Kann dieser Browser die aktuelle Deklaration nicht als Vorschau anzeigen, weist das Tool darauf hin, statt einen anderen Effekt einzusetzen; gültiger Code bleibt zum Kopieren verfügbar.

Dein Schatten bleibt auf der Seite

Schattenbearbeitung und Codegenerierung erfolgen lokal, ohne deine Werte hochzuladen oder zu speichern. Kopiert wird nur auf deine Veranlassung. Die allgemeine Datenschutzerklärung der Website gilt weiterhin.