Am besten kostenlos CSS Box Schatten Generator
Optisch bauen CSS-Box-Schatten mit Live-Vorschau, Einsetzen und einer zweiten Ebene - kopieren Sie den Code.
100% frei
Keine Anmeldung
Kein Wasserzeichen
✨
Go Pro für die besten AI-Modelle - Bild, Video und Chat - plus größere Uploads, Priorität in der Warteschlange und kein Warten.
Upgrade auf Pro
Liebe Best.Free? Teilen Sie es
Wie es funktioniert
- Schieberegler verschieben. Setze Offset, Unschärfe, Spreizung, Farbe und Deckkraft; schalte ein, wenn du einen inneren Schatten willst.
- Sehen Sie die Vorschau. Die Live-Box aktualisiert, wie Sie ziehen; fügen Sie eine zweite Ebene in Erweiterte Optionen für Tiefe.
- CSS kopieren. Klicken Sie auf Copy CSS und fügen Sie die Box-Schatten-Regel direkt in Ihr Stylesheet ein.
Über dieses Tool
Entwerfen Sie einen Kastenschatten ohne Pixelwerte zu erraten. Ziehen Sie den Offset-X, Offset-Y, Unschärfe und Streuschieber, wählen Sie eine Schattenfarbe und wählen Sie in seiner Deckkraft ein und schauen Sie sich eine Live-Vorschaubox in Echtzeit an - kopieren Sie dann den genauen Kastenschatten CSS. Drehen Sie den Einstellknopf für einen inneren Schatten. Die erweiterten Optionen stapeln eine zweite Schattenschicht, so dass Sie die weichen, mehrschichtigen Schatten auf modernen Karten und Tasten bauen können. Alles läuft in Ihrem Browser.
Wofür die Leute es benutzen
- Fügen Sie einen weichen Drop Shadow zu Karten und Modals
- Erstellen Sie einen inneren (Einbau) Schatten für Eingänge und Brunnen
- Stapeln Sie zwei Schichten für einen realistischen, diffusen Schatten
- Tune Offset und Unschärfe, um ein Design-Mockup
Häufig gestellte Fragen
Offset-X/Y bewegt den Schatten horizontal und vertikal, verschwimmt und weicht seine Kante ab, und wächst oder schrumpft der ganze Schatten, bevor der Unschärfen-Effekt angewendet wird.
Inset zeichnet den Schatten in das Element statt dahinter, gibt einen eingedrückten Blick - nützlich für Eingänge und Knebel. Drehen Sie den Einstellknopf um zu wechseln.
Wählen Sie eine Farbe aus, dann verwenden Sie den Deckkraft-Schieber; das Tool gibt einen rgba() Wert aus, so dass der Schatten natürlich blendet.
Ja. Öffnen Sie Erweiterte Optionen, um eine zweite Schattenschicht mit eigenem Offset, Unschärfe, Farbe und Einsetzen zu ermöglichen.
Nein. Der Generator läuft komplett in Ihrem Browser; die Schieberegler berechnen einfach lokal einen CSS String.
Völlig kostenlos, kein Konto und keine Grenzen - ein clientseitiges Tool mit nichts zu messen.
Ja. Es läuft in Ihrem Browser, so CSS Box Shadow Generator funktioniert auf Telefonen und Tablets sowie Desktop-Es gibt keine App zu installieren.
Normalerweise nur ein paar Sekunden für eine typische Datei - CSS Box Shadow Generator beginnt zu arbeiten, sobald Sie es Ihre Eingabe geben.
Casual-Nutzung ist unbegrenzt, unter einer großzügigen Fair-Use-Kappe, die es schnell für alle hält.
Alle modernen Browser - Chrome, Safari, Firefox und Edge. CSS Box Shadow Generator braucht nichts installiert über den Browser, den Sie bereits verwenden.