KitMul MarkKitMul Text

CSS Box Shadow Generator

Erstellen und passen Sie CSS box-shadow-Effekte mit einem visuellen Editor an. Fugen Sie mehrere Schatten hinzu, passen Sie Versatz, Unschaerfe, Ausbreitung, Farbe und Inset an.

Der CSS Box Shadow Generator ermoeglicht es Ihnen, box-shadow-Effekte fuer Ihre Webelemente visuell zu gestalten. Fugen Sie mehrere ueberlagerte Schatten hinzu, passen Sie Versatz, Unschaerferadius, Ausbreitungsdistanz, Farbe mit Deckkraft an und aktivieren Sie den Inset-Modus. Vorschau der Ergebnisse in Echtzeit und Kopieren des generierten CSS-Codes mit einem Klick. Laeuft vollstaendig in Ihrem Browser ohne Serververarbeitung.

Deine Daten bleiben in deinem Browser
Tutorial

Anleitung

1
1

Schatteneigenschaften anpassen

Verwenden Sie die Schieberegler, um Versatz X, Y, Unschaerferadius, Ausbreitung einzustellen und eine Farbe auszuwaehlen.

2
2

Mehrere Schatten hinzufuegen

Klicken Sie auf Schatten Hinzufuegen, um zusaetzliche Schatten auf demselben Element fuer reichere Tiefeneffekte zu ueberlagern.

3
3

CSS-Code kopieren

Klicken Sie auf die Schaltflaeche Kopieren, um den generierten box-shadow CSS-Eigenschaftswert in die Zwischenablage zu kopieren.

Guide

Vollstaendiger Leitfaden zu CSS Box Shadows

Box Shadow Syntax

Die CSS box-shadow-Eigenschaft akzeptiert Werte im Format: offset-x offset-y blur-radius spread-radius color. Das optionale Schluesselwort inset platziert den Schatten innerhalb des Elements. Mehrere Schatten werden durch Kommas getrennt und in Stapelreihenfolge gerendert.

Realistische Tiefe erzeugen

Realistische Schatteneffekte verwenden mehrere Schichten mit unterschiedlichen Unschaerfe- und Deckkraftwerten. Ein enger Schatten mit geringer Unschaerfe bietet Definition, waehrend ein groesserer diffuser Schatten Umgebungsokklusion erzeugt. Die Kombination erzeugt natuerlich aussehende Elevation.

Leistungsueberlegungen

Box-Shadows werden in modernen Browsern GPU-beschleunigt, koennen aber die Rendering-Leistung beeintraechtigen, wenn sie auf viele Elemente gleichzeitig angewendet werden. Vermeiden Sie es, box-shadow direkt zu animieren; verwenden Sie stattdessen Opazitaetstransitionen auf einem Pseudo-Element.

Browser-Kompatibilitaet

CSS box-shadow wird in allen modernen Browsern einschliesslich Chrome, Firefox, Safari und Edge unterstuetzt. Keine Herstellerpraefixe erforderlich. Fuer sehr alte Browser erwagen Sie einen soliden Rahmen als Fallback.

Sources

Examples

Geloeste Beispiele

Beispiel: Sanfter Elevationsschatten fuer Karte

Ziel: Einen subtilen Elevationsschatten fuer eine Kartenkomponente erstellen, der natuerlich und modern aussieht.

1

Schritt 1: Setzen Sie Versatz X auf 0 und Versatz Y auf 4 fuer einen Schatten direkt darunter.

2

Schritt 2: Setzen Sie Unschaerferadius auf 16 und Ausbreitung auf 0 fuer einen weichen diffusen Rand.

3

Schritt 3: Waehlen Sie eine dunkle Farbe mit niedriger Deckkraft wie #00000015.

4

Schritt 4: Kopieren Sie das CSS: box-shadow: 0px 4px 16px 0px #00000015;

Ergebnis: Ein sauberer, moderner Kartenschatten, der sanfte Tiefe ohne harte Kanten erzeugt.

Beispiel: Inset-Schatten fuer gedrueckten Button

Ziel: Einen Inset-Schatten fuer den aktiven/gedrueckten Zustand eines Buttons erstellen.

1

Schritt 1: Aktivieren Sie die Inset-Option.

2

Schritt 2: Setzen Sie Versatz X auf 0 und Versatz Y auf 2.

3

Schritt 3: Setzen Sie Unschaerfe auf 4 und Ausbreitung auf 0 mit Farbe #00000030.

4

Schritt 4: Kopieren Sie das CSS: box-shadow: inset 0px 2px 4px 0px #00000030;

Ergebnis: Der Button erscheint in die Oberflaeche gedrueckt, wenn er aktiv ist, und bietet klares taktiles Feedback.

Use Cases

Anwendungsfaelle

Elevationseffekte fuer UI-Karten

“Moderne kartenbasierte Oberflaechen setzen auf subtile Schatteneffekte, um visuelle Hierarchie und Tiefe zu erzeugen. Designer verwenden geschichtete Box-Schatten mit niedriger Deckkraft, um Material-Elevationsstufen zu simulieren, sodass interaktive Karten ueber der Seitenoberflaeche zu schweben scheinen.”

Button-Hover-Zustaende mit Tiefe

“Interaktive Buttons profitieren von dynamischen Schatteneffekten, die sich beim Hover und Aktivieren aendern. Ein gut gestalteter Box-Shadow-Uebergang gibt Benutzern klares visuelles Feedback, sodass sich Buttons drueckbar und reaktionsschnell anfuehlen.”

Modal- und Dialog-Ueberlagerungen

“Modale Dialoge benoetigen starke Schatteneffekte, um sich visuell vom Hintergrundinhalt zu trennen. Ein grosser Unschaerferadius mit maessiger Ausbreitung erzeugt die Illusion eines schwebenden Panels und lenkt die Aufmerksamkeit des Benutzers auf den Dialog.”

Haeufig Gestellte Fragen

?Was ist CSS box-shadow?

CSS box-shadow fuegt Schatteneffekte um den Rahmen eines Elements hinzu. Sie koennen horizontale und vertikale Versaetze, Unschaerferadius, Ausbreitungsdistanz, Farbe und einen optionalen Inset-Modifikator festlegen.

?Kann ich mehrere Schatten hinzufuegen?

Ja, CSS unterstuetzt durch Kommas getrennte mehrere Schatten auf einem einzelnen Element. Dieses Tool ermoeglicht es Ihnen, einzelne Schattenebenen unabhaengig hinzuzufuegen, zu konfigurieren und zu entfernen.

?Was bewirkt die Inset-Option?

Das Schluesselwort inset verschiebt den Schatten in das Element statt nach aussen. Dies erzeugt einen inneren Schatteneffekt, der haeufig fuer gedrueckte Button-Zustaende verwendet wird.

?Ist dieser Box-Shadow-Generator kostenlos?

Ja, dieses Tool ist voellig kostenlos ohne Nutzungsbeschraenkungen, ohne Registrierung und ohne Premium-Stufen. Verwenden Sie es so oft wie noetig.

?Werden meine Designs auf einen Server hochgeladen?

Nein, alles wird lokal in Ihrem Browser ausgefuehrt. Keine Daten werden an einen Server gesendet. Ihre Schattenkonfigurationen bleiben vollstaendig privat auf Ihrem Geraet.

?Beeinflusst box-shadow das Layout?

Nein, box-shadow ist rein visuell und beeinflusst weder das Box-Modell des Elements noch das Layout. Schatten werden standardmaessig ausserhalb des Rahmenbereichs gezeichnet.

Ähnliche Tools

CSS Border Radius Generator

Generieren Sie CSS border-radius mit visuellem Editor

Tool testen

CSS-Verlaufsgenerator

Erstellen Sie lineare, radiale und konische CSS-Verläufe

Tool testen

tools.automaticSubtitleGenerator.title

tools.automaticSubtitleGenerator.description

Tool testen
Empfohlene Lektüre

Empfohlene Buecher ueber CSS und Webdesign

HTML and CSS: Design and Build Websites

HTML and CSS: Design and Build Websites

Jon Duckett

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

Ben Frain

Web Design with HTML, CSS, JavaScript and jQuery Set

Web Design with HTML, CSS, JavaScript and jQuery Set

Jon Duckett

Als Amazon-Partner verdienen wir an qualifizierten Verkäufen.

Erweitern Sie Ihre Fähigkeiten

Empfohlene Produkte fuer Webdesigner

BenQ PD3205U 32-Zoll 4K UHD Professioneller Designer-Monitor mit sRGB-Farbgenauigkeit

BenQ PD3205U 32-Zoll 4K UHD Professioneller Designer-Monitor mit sRGB-Farbgenauigkeit

BenQ

Logitech MX Ergo Kabellose Trackball-Maus fuer praezise Designarbeit

Logitech MX Ergo Kabellose Trackball-Maus fuer praezise Designarbeit

Logitech

YUNZII B87 Kabelloses Mechanisches Keyboard mit Hot-Swap und RGB fuer Entwickler

YUNZII B87 Kabelloses Mechanisches Keyboard mit Hot-Swap und RGB fuer Entwickler

YUNZII

Als Amazon-Partner verdienen wir an qualifizierten Verkäufen.

Wie gefällt Ihnen dieses Tool?

Newsletter

Erhalte Produktivitätstipps und Neue Tools Zuerst

Schließe dich Machern und Entwicklern an, die Datenschutz schätzen. Jede Ausgabe: neue Tools, Produktivitäts-Hacks und Updates — kein Spam.

Prioritätszugang zu neuen Tools
Jederzeit abbestellen, ohne Rückfragen