Boxschatten-Generator
Box Shadow Generator ist ein kostenloses, visuelles CSS-Tool, mit dem Sie schöne Boxschatten für Ihre Webelemente erstellen können, ohne Code manuell schreiben zu müssen. Egal, ob Sie einen subtilen Schlagschatten für eine Kartenkomponente, einen intensiven Leuchteffekt für eine CTA-Schaltfläche oder mehrschichtige Schatten für einen dramatischen 3D-Effekt benötigen, mit diesem Generator haben Sie die vollständige Kontrolle über jeden Schattenparameter. Passen Sie den horizontalen und vertikalen Versatz, den Unschärferadius, den Streuradius, die Farbe und die Deckkraft mit intuitiven Schiebereglern und Farbwählern an. Wechseln Sie zwischen Einfügungs- und Anfangsschatten. Fügen Sie mehrere Schattenebenen hinzu und sehen Sie das Ergebnis in Echtzeit auf einem Live-Vorschau-Element. Das Tool gibt sauberen, browserübergreifenden CSS-Code aus, der zum Kopieren und Einfügen in Ihr Stylesheet bereit ist.
Was ist
Die CSS-Eigenschaft box-shadow fügt Schatteneffekte um den Rahmen eines Elements hinzu. Ein Boxschatten kann durch X- und Y-Versätze relativ zum Element, Unschärfe- und Streuradius, Farbe und ob der Schatten innerhalb oder außerhalb des Elements erscheint, beschrieben werden. Die Box-Schatten-Syntax: box-schatten: Versatz-x-Versatz-y-Unschärfe-Radiusverteilung-Radiusfarbeinfügung; Jeden Parameter verstehen: - offset-x: Horizontaler Abstand des Schattens vom Element. Positive Werte bewegen sich nach rechts, negative Werte nach links. - versatz-y: Vertikaler Abstand. Positive Werte bewegen sich nach unten, negative Werte nach oben. - unschärferadius: Wie verschwommen die Schattenkante ist. 0 bedeutet eine scharfe Kante, höhere Werte erzeugen weichere Schatten. Das kann nicht negativ sein. - spread-radius: Erweitert oder verkleinert die Schattengröße. Positive Werte machen den Schatten größer als das Element, negative Werte verkleinern ihn. - farbe: Jeder CSS-Farbwert (Hex, RGB, rgba, hsl, benannte Farben). Die Verwendung von rgba mit Alpha-Transparenz erzeugt realistische Schatten. - Einfügung (optional): Wenn vorhanden, wird der Schatten innerhalb des Elements anstatt außerhalb gezeichnet. Warum Box-Shadow im Webdesign verwenden: - Tiefe und Höhe: Schatten erzeugen eine visuelle Hierarchie, indem Elemente scheinbar über der Oberfläche schweben - Materialdesign-Konformität: Das Materialdesign-System von Google verwendet die Schattentiefe, um die Komponentenhierarchie anzuzeigen - Fokus- und Schwebezustände: Schatten geben visuelles Feedback zu interaktiven Elementen - Ästhetischer Schliff: Selbst subtile Schatten lassen Oberflächen raffinierter und professioneller aussehen - Kartendifferenzierung: Schatten helfen, Karten in kartenbasierten Layouts von Hintergründen zu trennen Der Generator unterstützt mehrere Schattenebenen (kommagetrennt), sodass Sie mehrere Schatteneffekte auf ein einzelnes Element stapeln können, um realistischere oder dramatischere Ergebnisse zu erzielen.
Wie zu verwenden
- Aktivieren oder deaktivieren Sie einzelne Schattenebenen mithilfe der Kontrollkästchen. Beginnen Sie mit einer Schattenebene und fügen Sie nach Bedarf weitere hinzu, indem Sie auf die Schaltfläche 'Schatten hinzufügen' klicken. Jede Ebene kann unabhängig konfiguriert werden.
- Passen Sie den horizontalen Versatz (offset-x) mit dem Schieberegler an. Positive Werte verschieben den Schatten nach rechts vom Element, negative Werte nach links. Beobachten Sie die Vorschau, die sich in Echtzeit aktualisiert, während Sie ziehen.
- Stellen Sie den vertikalen Versatz (offset-y) ein, um zu steuern, wie weit über oder unter dem Element der Schatten erscheint. Positive Werte verschieben den Schatten nach unten und simulieren eine Lichtquelle von oben.
- Erhöhen Sie den Unschärferadius für weichere, diffusere Schatten. Ein Wert von 0 erzeugt einen scharfkantigen Schatten; Werte zwischen 5-20px erzeugen natürlich wirkende Schatten für die meisten UI-Elemente. Sehr hohe Werte (30px+) erzeugen glühende Effekte.
- Feinabstimmung des Streuungsradius, um den Schatten zu vergrößern oder zu verkleinern. Negative Werte können den Schatten um das Element herum verengen, nützlich für scharfe Kanteneffekte. Positive Werte machen den Schatten größer als das Element selbst.
- Wählen Sie Ihre Schattenfarbe mit der Farbauswahl. Aktivieren Sie den Deckkraft-Schieberegler, um die Transparenz anzupassen – realistische Schatten verwenden typischerweise rgba(0, 0, 0, 0.1-0.3). Probieren Sie verschiedene Farben für kreative Glüheffekte (z. B. blaues Glühen für Neon-Buttons).
- Schalten Sie das Kontrollkästchen 'Inset' um, um zwischen äußeren und äußeren Schatten zu wechseln. Inset-Schatten werden innerhalb des Elements gezeichnet, wodurch ein gedrücktes oder vertieftes Aussehen entsteht, das für Formulareingaben und gedrückte Schaltflächen nützlich ist.
- Kopieren Sie den generierten CSS-Code mit einem einzigen Klick aus dem Ausgabefeld. Der Code enthält alle Herstellerpräfixe für die browserübergreifende Kompatibilität. Fügen Sie ihn direkt in Ihr Stylesheet oder Inline-Style-Attribut ein.
Beispiele
Eingabe: X:0 Y:4px Unschärfe:12px Ausdehnung:0 Farbe:rgba(0,0,0,0.15)
Prozess: Kombinieren Sie Versatz + Unschärfe + Farbe → CSS-Box-Schatten-Syntax
Ergebnis: box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
Eingabe: X:2px Y:2px Unschärfe:8px Ausbreitung:-2px Farbe:#3b82f6
Prozess: Mehrfach-Schatten-Überlagerung → Versatzberechnung
Ergebnis: box-shadow: 2px 2px 8px -2px #3b82f6;
Verwandte Suchen
Leute suchen auch nach: Box-Schatten-Generator, CSS-Box-Schatten, Schatten-Generator, CSS-Schatten.
Box-Schatten-GeneratorCSS-Box-SchattenSchatten-GeneratorCSS-Schatten
Häufig gestellte Fragen
Was ist der Unterschied zwischen Box-shadow und text-shadow?
box-shadow gilt für Blockelemente (divs, sections, Karten, Buttons) und erzeugt Schatten um den rechteckigen Rahmen des Elements. text-shadow gilt für Textinhalte innerhalb eines Elements und erzeugt Schatten hinter den tatsächlichen Buchstabenformen. Die Syntax ist ähnlich (offset-x, offset-y, Weichzeichnung, Farbe), aber box-shadow hat zusätzliche Merkmale wie Spread-Radius und den Inset-Schlüsselbegriff.
Kann ich mehrere Schatten auf einem Element erzeugen?
Ja! Mehrere Kastenschatten werden durch Komma getrennte Schattenwerte definiert. Das Tool unterstützt unbegrenzte Schattenebenen. Mehrere Schatten ermöglichen realistischere Effekte — zum Beispiel die Kombination eines engen dunklen Schattens für unmittelbare Tiefe mit einem weicheren, größeren Schatten für Umgebungsschatten. Die Reihenfolge ist wichtig: Der erste Schatten in der Liste erscheint oben, weitere Schatten werden dahinter geschichtet.
Welche Farbe sollte ich für realistische Schatten verwenden?
Für die realistischsten Ergebnisse verwenden Sie eine dunkle Version Ihrer Hintergrundfarbe mit geringer Deckkraft. Reines Schwarz mit 15-25% Deckkraft (rgba(0,0,0,0.15-0.25)) funktioniert gut auf hellen Hintergründen. Bei farbigen Hintergründen verwenden Sie einen dunkleren Farbton der Hintergrundfarbe. Vermeiden Sie vollständig deckende Schatten — sie wirken unnatürlich. Für farbige Glüheffekte verwenden Sie helle Farben mit 30-60% Deckkraft.
Wird box-shadow in allen Browsern unterstützt?
Ja, box-shadow hat eine hervorragende Browserunterstützung. Es funktioniert in allen modernen Browsern einschließlich Chrome, Firefox, Safari, Edge und Opera ohne Herstellerpräfixe. Für sehr alte Browser (IE 8 und älter) wird box-shadow nicht unterstützt, aber diese Browser haben heute einen vernachlässigbaren Marktanteil. Der generierte CSS-Code enthält das -webkit- Präfix für maximale Kompatibilität.
Wie erstelle ich einen Schatten im Material Design-Stil?
Material Design verwendet spezifische Schattenwerte für verschiedene Höhenstufen. Übliche Werte: Stufe 1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Stufe 2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23). Stufe 3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23). Die Überlagerung von zwei Schatten pro Stufe (einer enger, einer diffus) erzeugt den charakteristischen Tiefeneffekt von Material Design.