Diese Seite nutzt datenschutzfreundliche Analyse-Daten aus erster Hand, um zu sehen, welche Seiten und Tools nützlich sind. Keine Daten werden an Werbetreibende oder Tracking-Dienste Dritter weitergegeben. Details zum Datenschutz

Tools · CSS · CSS-Schatten erstellen

CSS-Schatten erstellen

Erstelle einen mehrschichtigen CSS-Schatten (box-shadow) mit Live-Vorschau, und kopiere den Code.

Dein Ergebnis erscheint hier

Füge eine Datei hinzu und starte das Tool.

Einstellungen

Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.

Datei hier ablegen oder auswählen.

Läuft komplett im Browser. Es wird nichts hochgeladen.

Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.

So funktioniert es

  1. Von einer Vorlage starten, oder Versatz, Unschärfe, Ausbreitung und Farbe einer Ebene selbst einstellen.

  2. Weitere Ebenen für mehr Tiefe hinzufügen (insgesamt bis zu 4), oder beliebige entfernen.

  3. Das fertige box-shadow-CSS kopieren.

Häufige Fragen

Ja, bis zu vier Ebenen. Sie werden in der Reihenfolge dargestellt, in der du sie hinzufügst - das ist auch die Reihenfolge, in der CSS sie anwendet, sodass die erste Ebene dem Element am nächsten liegt.

Der horizontale und vertikale Versatz verschiebt den Schatten. Die Unschärfe weicht seine Kante auf. Die Ausbreitung vergrößert oder verkleinert den Schatten, bevor die Unschärfe angewendet wird.

Sie zeichnet den Schatten innerhalb statt außerhalb des Elementrands, für einen eingedrückten Look.

Nein. Alles geschieht in deinem Browser, und nichts wird irgendwohin gesendet.

Anleitungen

Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.

5 Min. Lesezeit

Why One Flat Shadow Looks Fake, and Layered Ones Don't

A single box-shadow value usually reads as a sticker glued behind the element, not an object lifted off the page. Real light casts two different kinds of shadow at once, and CSS can only fake that with more than one layer.

Anleitung lesen 5 Min. Lesezeit

How to Build a Layered CSS Box-Shadow

The exact steps for building a real, comma-separated box-shadow value with more than one layer, plus the two settings people get backwards: spread versus blur, and inset versus outer.

Anleitung lesen 4 Min. Lesezeit

Inset vs. Drop Shadow: Which One Your Design Actually Needs

The same four numbers - offset, blur, spread, opacity - mean opposite things depending on one checkbox. Here's how to tell which direction a given piece of UI actually calls for.

Anleitung lesen

Ähnliche Tools

CSS-Ecken abrunden

Gestalte jede Ecke einer Box einzeln, oder verschmelze sie zu einer organischen Blob-Form, und kopiere das border-radius-CSS.

 Glassmorphism-Effekt erstellen

Erstelle eine Milchglas-Karte mit Hintergrundunschärfe, Transparenz und weichem Rand, und kopiere das CSS.

 CSS-Verlauf erstellen

Erstelle einen linearen, radialen oder konischen CSS-Verlauf, und kopiere den Code.

 Cubic-Bezier-Easing-Generator

Ziehe eine Kurve, um einen cubic-bezier()-Easing-Wert zu erstellen, sieh sie mit einem echten CSS-Übergang live abspielen, und kopiere den Code.

 Farbkonverter

Wandle eine Farbe live zwischen HEX, RGB, HSL und OKLCH um.

 CSS-Minifizierer & -Formatierer

Minifiziere oder formatiere CSS, live während du einfügst, vollständig in deinem Browser.

Kommentare

  1. Noch keine Kommentare. Teile deine Erfahrung als Erstes.
Deine Bewertung (optional)

Keine Bewertung ausgewählt