HTML- und CSS-Werkzeuge
Wähle Schatten, Rahmen und Ecken, Transformation oder Filter. Die Ausgabe gilt nur für den gewählten Effekt.
Der farbige Hintergrund ist nur ein Beispiel und gehört nicht zum CSS-Ergebnis.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
Parameter bleiben in diesem Browser-Tab; Bilder und CSS werden nicht hochgeladen.
CSS für Box-Schatten ist aktuell.
Ein Schatten kann trotz passender Farbe zu hart wirken, wenn Weichzeichnung und Ausdehnung verwechselt werden. Dieser CSS-Generator trennt beide Werte und zeigt den Effekt auf einer Kachel, bevor du die Deklaration in dein Stylesheet übernimmst.
Der CSS-Generator merkt sich im geöffneten Tab auch die Einstellungen für Rahmen, Transformation und Filter. Ein Wechsel zwischen den Ansichten ist zum Vergleichen gedacht; beim Kopieren bleibt die Ausgabe auf die aktuelle Eigenschaft begrenzt.
Ein CSS-Schatten-Generator mit einer Ebene zeigt Kontakt- und Umgebungsschatten nicht gleichzeitig. Hier kannst du bis zu vier Ebenen mit eigenem Versatz, Ausdehnung, Farbe und Deckkraft stapeln. Die Reihenfolge entspricht der CSS-Deklaration.
Dieser CSS-Generator behält Ecken, Transformationswerte und Filter im Tab. Beim Umschalten kopierst du trotzdem nur die ausgewählte Eigenschaft; ein alter Schatten landet nicht unbemerkt in einem Filter-Snippet.
Vergrößere zunächst die Weichzeichnung des vorhandenen Schattens. Eine negative Ausdehnung verkleinert seine Fläche, während der Versatz die Lage ändert. Eine zweite kurze Ebene kann den Kontakt zum Untergrund zeigen.
Verknüpfe die vier Ecken für einen Radius oder bearbeite sie getrennt. Transformationen werden als Verschieben, Drehen, Skalieren, Neigen ausgegeben; eine andere Reihenfolge im Ziel-CSS ändert das Ergebnis.
Die automatische Ausgabe wartet nach der letzten Änderung etwa 350 ms. Ohne Automatik nutze die Schaltfläche oder Strg/Cmd+Enter. Beispiel, Zurücksetzen und Ebenen löschen zeigen erst eine Vorschau und lassen sich einmal rückgängig machen.
Als Box-Shadow-Generator steuert das Werkzeug für jede Ebene X/Y-Versatz, Weichzeichnung, Ausdehnung, Hex-Farbe, Deckkraft und inset. Die Werte werden in einer box-shadow-Deklaration durch Kommas verbunden.
Für Ecken abrunden CSS kannst du einen gemeinsamen Radius oder vier px-Werte wählen. Rahmenbreite, Stil und Farbe stehen daneben; bei Breite null bleibt der Radius trotz border: none erhalten.
Verschieben, Drehen, Skalieren und Neigen werden in definierter Reihenfolge kombiniert. Neutrale Funktionen fallen weg, sodass der Grundzustand transform: none erzeugt.
Der CSS-Filter-Generator kombiniert Unschärfe, Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Farbton, Invertierung und Deckkraft. Nur abweichende Werte erscheinen im CSS.
Erhöhe die Weichzeichnung und senke gegebenenfalls die Deckkraft. Die Ausdehnung bestimmt dagegen die Größe der Schattenfläche; beide Regler wirken verschieden.
Ja. Bis zu vier Ebenen werden in Listenreihenfolge als kommagetrennte box-shadow-Werte ausgegeben. Vor dem Löschen einer Ebene erscheint eine Vorschau.
Weichzeichnung macht den Rand weicher. Ausdehnung vergrößert oder verkleinert den Schattenkörper und darf hier auch negativ sein.
Mit inset wird der Schatten an der Innenseite der Box gezeichnet. Der Schalter gehört jeweils zu einer bestimmten Ebene.
Du gibst sechsstellige Hex-Farben und die Deckkraft separat ein. Für Schatten entsteht daraus rgba(); frei eingegebene RGBA-Texte werden nicht analysiert.
Ist ein erzeugter Schatten unerwartet hart?
Verändere das Beispiel und übernimm genau die Deklaration, die dein Element benötigt.