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. Mehr erfahren

Tools · CSS · CSS-Schatten erstellen

CSS-Schatten erstellen

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

Datei hier ablegen oder auswählen.

Läuft komplett im Browser. Es wird nichts 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.

Ähnliche Tools

CSS-Verlauf erstellen

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

 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.

 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.

 Clip-Path-Generator

Erstelle eine CSS-clip-path-Form - Polygon, Kreis, Ellipse oder Inset - mit Live-Vorschau, und kopiere den Code.

 CSS-Minifizierer & -Formatierer

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

 Flexbox-Spielwiese

Erstelle ein CSS-Flexbox-Layout - Richtung, Umbruch, Ausrichtung, Abstand sowie Wachstum, Schrumpfung und Basis je Element - mit Live-Vorschau, und kopiere den Code.

 Grid-Spielwiese

Erstelle ein CSS-Grid-Layout - Spurenzahl, Abstände, Ausrichtung sowie Platzierung je Element - mit Live-Vorschau, und kopiere den Code.

Kommentare

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

Keine Bewertung ausgewählt