UUID-Generator
Zufällige UUIDs in großen Mengen erzeugen.
CSS-Box-Shadow-Generator
Forme einen Schatten mit Reglern, staple mehrere Ebenen und kopiere das CSS.
Deine Dateien bleiben auf deinem Gerät
So funktioniert es
- 1Bewege die Regler für Versatz, Unschärfe und Ausbreitung.
- 2Wähle eine Farbe und Deckkraft. Aktiviere „Inset“ für einen inneren Schatten.
- 3Füge Ebenen hinzu, um einen weicheren, natürlicheren Schatten zu bauen.
- 4Kopiere das CSS.
Was die Optionen bewirken
- Versatz
- Horizontaler und vertikaler Abstand des Schattens zum Element. Negative Werte gehen nach links und oben.
- Unschärfe
- Wie weich der Rand ist. Null ergibt einen harten Rand.
- Ausbreitung
- Vergrößert oder verkleinert den Schatten vor dem Weichzeichnen. Eine negative Ausbreitung verhindert, dass starke Unschärfe seitlich überläuft.
- Inset
- Zeichnet den Schatten innerhalb des Elements, wie bei einem eingedrückten Feld.
- Ebenen
- Mehrere Schatten werden gemeinsam gezeichnet. Zwei oder drei dezente Ebenen wirken natürlicher als eine schwere.
Datenschutz
Alles läuft in deinem Browser. Nichts, was du eingibst, wird an einen Server gesendet.
Häufige Fragen
Warum mehr als eine Schattenebene verwenden?
Echte Schatten sind nahe am Objekt scharf und weiter weg weich. Ein kleiner enger Schatten plus ein großer weicher ahmt das nach und wirkt feiner als eine einzelne Unschärfe.
Folgt ein Box-Shadow abgerundeten Ecken?
Ja, er folgt dem border-radius des Elements. Der Radius-Regler zeigt das und ist im kopierten CSS enthalten.
Machen große Unschärfen die Seite langsam?
Ein paar statische Schatten sind in Ordnung. Viele große unscharfe Schatten oder deren Animation können auf schwachen Handys teuer sein. Animiere stattdessen die Deckkraft eines Pseudo-Elements.
Was ist der Unterschied zu drop-shadow()?
box-shadow folgt dem rechteckigen Kasten. Der Filter drop-shadow() folgt der sichtbaren Form, einschließlich transparenter PNG- und SVG-Ränder.
Kann ich die Ausgabe in Tailwind oder anderen Tools nutzen?
Der Wert nach box-shadow: ist normales CSS. In Tailwind setzt du ihn in einen beliebigen Wert und ersetzt Leerzeichen durch Unterstriche.