Box-Schatten-Generator
CSS-box-shadow-Eigenschaften erzeugen
Schattenebenen
Schatten 1
Schattenvorlagen
Tipps zu Schatten
Positive Versatzwerte verschieben Schatten nach unten und rechts, negative Werte nach oben und links.
Der Unschärferadius bestimmt die Weichheit des Schattens; höhere Werte erzeugen diffusere Schatten.
Der Ausbreitungsradius vergrößert oder verkleinert den Schatten.
Innere Schatten erzeugen Schatten innerhalb des Elements für Tiefeneffekte.
Mehrere Schatten lassen sich für komplexe Beleuchtungseffekte übereinanderlegen.
Niedrigere Deckkraftwerte erzeugen dezentere, realistischere Schatten.
Live-Vorschau
Vorschauskalierung: 100%
CSS-Deklaration
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);CSS-Klasse
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (ungefähr)
shadowDies ist ein Stilvorschlag. Benutzerdefinierte Versätze, Farben, innere Schatten und mehrere Ebenen benötigen das generierte CSS.
Passen Sie eine Ebene an oder probieren Sie eine Vorlage aus. Die Vorschau aktualisiert sich während der Bearbeitung.
Über den Box-Schatten-Generator
Unser kostenloser CSS-Box-Shadow-Generator hilft Ihnen, professionelle Schatteneffekte mit voller visueller Kontrolle zu erstellen. Passen Sie Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft über übersichtliche Regler an und sehen Sie das Ergebnis in Echtzeit. Kombinieren Sie mehrere Schatten für komplexe Tiefeneffekte, mit denen Ihre Oberflächenelemente hervortreten.
Schatten sind in modernen Weboberflächen entscheidend für visuelle Hierarchie und Tiefe. Ein gut gesetzter box-shadow lässt Karten über der Seite schweben, macht Schaltflächen anklickbar und hebt Navigationselemente vom Hintergrund ab. Dieses Tool erspart Ihnen das Ausprobieren beim manuellen Schreiben von box-shadow-Werten.
Der Generator unterstützt äußere und innere Schatten (inset), mehrere Schattenebenen und enthält 6 Vorlagen für gängige Schattenstile. Die Ausgabe erfolgt als CSS-Code mit Kopierschaltfläche per Klick, dazu gibt es ungefähre Vorschläge für Tailwind-CSS-Utility-Klassen. Die gesamte Verarbeitung geschieht in Ihrem Browser, es werden keine Daten an einen Server gesendet.
Hauptfunktionen
- Mehrere Schattenebenen, die hinzugefügt, entfernt und einzeln konfiguriert werden können
- Präzise Regler für X-Versatz, Y-Versatz, Weichzeichnung und Ausbreitung
- Farbauswahl mit Hex-Eingabe und einstellbarer Deckkraft für jede Schattenebene
- Schalter für innere Schatten (inset) für Tiefe im Inneren und geprägte Effekte
- 6 Schattenvorlagen: Dezent, Mittel, Groß, Extragroß, Innen und Mehrfach
- Zufallsgenerator für Schatten, um kreative Schattenkombinationen zu entdecken
- Live-Vorschau in Echtzeit mit anpassbarer Elementfarbe
- Kopieren in die Zwischenablage per Klick mit sauberer CSS-Ausgabe
- Alternative Ausgabeformate, darunter CSS-Klasse und ungefähre Tailwind-CSS-Utility
- Vollständige Unterstützung des Dunkelmodus für angenehmes Arbeiten bei jedem Licht
So verwenden Sie den Box-Schatten-Generator
- Schattenebenen hinzufügen: Beginnen Sie mit dem Standardschatten oder klicken Sie auf „Hinzufügen“, um weitere Schattenebenen für komplexe Effekte zu erstellen.
- Schatteneigenschaften anpassen: Stellen Sie mit den Reglern X-/Y-Versatz, Weichzeichnung, Ausbreitung, Farbe und Deckkraft für jede Schattenebene ein.
- Inset umschalten: Aktivieren Sie bei einer Schattenebene das Kontrollkästchen „Inset“, um statt eines äußeren einen inneren Schatten zu erzeugen.
- Ergebnis ansehen: Das Vorschauelement zeigt Ihnen genau, wie Ihr Schatten aussieht. Ändern Sie bei Bedarf die Farbe des Vorschauelements.
- Vorlagen ausprobieren: Klicken Sie auf eine der 6 Vorlagen, um gängige Schattenstile schnell als Ausgangspunkt zu übernehmen.
- CSS kopieren: Klicken Sie auf „Kopieren“, um die vollständige box-shadow-CSS-Deklaration in die Zwischenablage zu kopieren.
Anwendungsfälle
- Erhöhung von Karten: Verleihen Sie Karten-Komponenten Tiefe, damit sie über dem Seitenhintergrund zu schweben scheinen.
- Hover-Zustände von Schaltflächen: Erstellen Sie Schattenübergänge für Schaltflächen, die optisch auf Nutzerinteraktion reagieren.
- Gestaltung von Modals und Dialogen: Setzen Sie große, weiche Schatten bei Modals und Dialogfeldern ein, um sie klar vom Hintergrund abzusetzen.
- Navigations-Dropdowns: Gestalten Sie Dropdown-Menüs und Popovers mit Schatten, die Ebenen und Tiefe vermitteln.
- Fokuseffekte bei Eingabefeldern: Verwenden Sie farbige Schatten als Fokusanzeige für Formularfelder und interaktive Elemente.
- Inset-Effekte: Erzeugen Sie eingedrückte oder geprägte Optiken für Umschalter, aktive Zustände und Dekorelemente.
- Neumorphismus-Design: Kombinieren Sie mehrere helle und dunkle Schatten, um die beliebte Soft-UI-Optik zu erreichen.
- Bildrahmen: Versehen Sie Bilder und Medien-Container mit dezenten Schatten für eine gepflegte Galerie-Optik.
Häufig gestellte Fragen
Ist dieses Tool kostenlos?
Ja, der Box-Schatten-Generator ist völlig kostenlos und die Zahl der Schatten, die Sie erstellen können, ist nicht begrenzt. Eine Registrierung oder Zahlung ist nicht nötig.
Sind meine Daten sicher?
Die gesamte Schattenerzeugung und Vorschau findet vollständig in Ihrem Browser statt. Es werden keine Daten an einen externen Server gesendet, Ihre Einstellungen und die CSS-Ausgabe bleiben daher komplett privat.
Was ist der Unterschied zwischen Weichzeichnung und Ausbreitung?
Die Weichzeichnung (blur radius) bestimmt, wie weich oder diffus der Schatten wirkt: Höhere Werte erzeugen einen sanfteren Verlauf. Die Ausbreitung (spread radius) vergrößert (positive Werte) oder verkleinert (negative Werte) den Schatten im Verhältnis zum Element.
Kann ich mehrere Schatten auf einem Element verwenden?
Ja, CSS unterstützt mehrere durch Kommas getrennte box-shadows. Mit diesem Tool können Sie mehrere Schattenebenen hinzufügen, die automatisch zu einer einzigen box-shadow-Deklaration zusammengefasst werden.
Was ist ein innerer Schatten (inset)?
Ein innerer Schatten wird innerhalb statt außerhalb des Elements dargestellt und erzeugt den Eindruck einer Vertiefung oder eines eingedrückten Elements. Er wird häufig bei Eingabefeldern, aktiven Schaltflächenzuständen und Neumorphismus-Designs verwendet.
Wird box-shadow in allen Browsern unterstützt?
Ja, die Eigenschaft box-shadow wird in allen modernen Browsern vollständig unterstützt, darunter Chrome, Firefox, Safari, Edge und Opera. Herstellerpräfixe sind nicht nötig.
Tipps und bewährte Vorgehensweisen
- Schatten dezent halten: Geringe Deckkraft (5-15%) und moderate Weichzeichnung erzeugen realistische, professionelle Schatten, die das Design nicht erdrücken.
- Negative Ausbreitung nutzen: Eine leicht negative Ausbreitung lässt Schatten enger und fokussierter unter dem Element erscheinen.
- Mehrere Schatten kombinieren: Verbinden Sie einen engen, dunklen Schatten mit einem breiteren, helleren für natürlich wirkende Tiefe wie bei echtem Licht.
- Lichtquelle beibehalten: Halten Sie die Versatzrichtungen im gesamten Design einheitlich, um eine einzige, stimmige Lichtquelle zu simulieren.
- Performance beachten: Große Weichzeichnungswerte bei vielen Elementen können die Darstellungsleistung beeinträchtigen, besonders auf mobilen Geräten.
- Schatten für Hierarchie einsetzen: Eine höhere Erhebung (größerer Versatz und stärkere Weichzeichnung) sollte Elemente kennzeichnen, die dem Nutzer im visuellen Stapel näher sind.