Gestalte Box-Shadows und moderne Milchglas-Effekte mit sofortigem Kopieren des generierten CSS-Codes.
Gestalte Box-Shadows und moderne Milchglas-Effekte mit sofortigem Kopieren des generierten CSS-Codes. Geeignet für Alltag, Entwicklung, Lernen und schnelle Prüfungen.
Dieses Tool läuft im Browser. Prüfe vor sensiblen Daten, ob du deinem Gerät und Browser vertraust.
Mit diesem Tool gestaltest du CSS-Schatten und Milchglas-Effekte per Schieberegler, siehst sie live auf einer Karte und kopierst CSS, das du direkt ins Projekt einfügen kannst. Im Tab Box Shadow hat jede Ebene einen horizontalen und vertikalen Versatz (-50 bis 50 px), einen Unschärferadius (0 bis 100 px), einen Ausbreitungsradius (-30 bis 50 px), Farbe mit Deckkraft und eine Inset-Option für Innenschatten. Standardmäßig wird box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.30); ausgegeben, Farben im rgba-Format.
Über den Button zum Hinzufügen von Ebenen stapelst du mehrere Schatten; sie werden mit Kommas verbunden, und die erste Ebene der Liste liegt oben. Realistische Schatten bestehen meist aus einer nahen, scharfen und einer fernen, weichen Ebene. Die Vorlage 3D Double kombiniert zum Beispiel 0 5px 5px und 0 20px 25px in schwach deckendem Schwarz und wirkt natürlicher als ein einzelner großer Schatten. Eine negative Ausbreitung macht den Schatten kleiner als das Element – ein üblicher Trick für weiche Schatten unter Karten –, während Glow Light mit Markenfarbe, null Versatz und großer Unschärfe einen Leuchteffekt erzeugt.
Im Tab Glassmorphism entstehen Milchglas-Karten: Stelle die Hintergrundunschärfe (backdrop-filter: blur, 0 bis 40 px), Hintergrundfarbe und Deckkraft sowie Farbe und Deckkraft eines 1-px-Rahmens ein. Das erzeugte CSS enthält backdrop-filter und das von Safari benötigte -webkit-backdrop-filter. Entscheidend ist ein halbtransparenter Hintergrund mit Inhalt dahinter; über einer einfarbigen Fläche gibt es nichts zu verwischen, deshalb kannst du in der Vorschau zwischen Verlaufs- und dunklem Hintergrund wechseln.
Ein paar Praxistipps: Große Flächen mit backdrop-filter können auf schwächeren Smartphones Leistung kosten, setze den Effekt daher auf wenigen Karten oder in der Navigationsleiste ein. Achte auf den Textkontrast über durchscheinenden Flächen; bei geringer Deckkraft hilft eine dunklere Tönung oder eine kräftigere Schrift. Die rgba-Werte funktionieren direkt mit CSS-Variablen oder Tailwind-Arbitrary-Values. Alles läuft im Browser, ohne Anmeldung.
box-shadow akzeptiert eine kommagetrennte Liste; der erste Schatten wird oben gezeichnet, jeder weitere darunter. Ein kleiner, scharfer Schatten vorne und ein größerer, blasserer dahinter erzeugen überzeugende Tiefe. Im Tool ist Layer #1 die oberste Ebene.
Mit aktiviertem Inset wird der Schatten innerhalb des Elements gezeichnet. Das eignet sich für vertieft wirkende Eingabefelder, gedrückte Buttons oder eine dezente Lichtkante oben an einer Glaskarte – genau dafür nutzt die Vorlage Glass Inner einen schwachen weißen Innenschatten.
backdrop-filter verwischt den Inhalt hinter dem Element. Die Hintergrundfarbe muss also halbtransparent sein (Deckkraft unter 1), und dahinter muss ein Bild, Verlauf oder anderer Inhalt liegen. Über einer einfarbigen Fläche ist der Effekt kaum sichtbar. Behalte außerdem -webkit-backdrop-filter für Safari bei.
Aktuelle Versionen von Chrome, Edge, Firefox und Safari unterstützen es; Safari benötigt das Präfix -webkit-, das im erzeugten CSS bereits enthalten ist. Musst du sehr alte Browser bedienen, ergänze eine deckendere Hintergrundfarbe als Fallback.
Kategorie ansehen: Design & Farben
Prüfe Kontrastverhältnisse zwischen Text und Hintergrund mit AA/AAA-Bewertung und Farbfehlsichtigkeits-Filter.
Erzeuge Partikel, elastische Körper, Kollisionen und Gravitationsfelder in Echtzeit mit HTML5 Canvas.
Setze Ankerpunkte, ziehe Bézier-Griffe auf einer 500×500-Fläche und erhalte sofort das d-Attribut des SVG-Pfads und eine CSS-Regel clip-path: path().
Setze Screenshots in ein elegantes Browserfenster im macOS-Stil mit Schatten und Farbverlauf und lade sie als hochauflösendes PNG herunter.
