CSS-Box-Schattengenerator
Erstellen Sie realistische Höhen, anstatt Werte zu erraten. Passen Sie den horizontalen und vertikalen Versatz, die Unschärfe, die Ausbreitung, die Farbe und die Deckkraft an, stapeln Sie mehrere Ebenen für die Tiefe und kopieren Sie dann die genaue CSS-Regel.
Wichtige Fakten
- Kategorie
- Design & Farbe
- Preis
- Frei
- Konto
- Nicht erforderlich
- Verarbeitung
- In Ihrem Browser
- Eingang
- Lokale Dateien oder eingefügte Daten
- Plattform
- Moderne Desktop- und mobile Browser
Was es bewirkt
Erstellen Sie realistische Höhen, anstatt Werte zu erraten. Passen Sie den horizontalen und vertikalen Versatz, die Unschärfe, die Ausbreitung, die Farbe und die Deckkraft an, stapeln Sie mehrere Ebenen für die Tiefe und kopieren Sie dann die genaue CSS-Regel.
Gestalten Sie mehrschichtige Boxschatten visuell und kopieren Sie produktionsbereites CSS.
Wie man es benutzt
Hier ist die Kurzversion der Verwendung von CSS-Box-Schattengenerator.
- Stellen Sie die Offsets und die Unschärfe ein — Ziehen Sie die Schieberegler oder geben Sie genaue Pixelwerte ein. Die Vorschaukarte wird sofort aktualisiert.
- Wählen Sie Farbe und Deckkraft — Verwenden Sie den Farbwähler und den Alpha-Schieberegler, um Ihre Palette anzupassen, einschließlich Schatten im Dunkelmodus.
- Kopieren Sie das CSS — Fügen Sie weitere Ebenen hinzu, wenn Sie einen weicheren, natürlicheren Schatten benötigen, und kopieren Sie dann die Box-Shadow-Deklaration.
Funktionen, die wichtig sind
Was CSS-Box-Schattengenerator gut macht.
- Nichts verlässt Ihr Gerät — Die Arbeit geschieht in Ihrem Browser-Tab. In dieser App gibt es keinen Upload-Endpunkt, sodass Ihre Dateien und Texte von uns nicht gespeichert, protokolliert oder eingesehen werden können.
- Keine Upload-Wartezeit — Sie überspringen den Hin- und Rückweg zu einem Server vollständig. Die Ergebnisse werden durch Ihre eigene CPU begrenzt, nicht durch die Netzwerkgeschwindigkeit oder die Warteschlangengröße.
- Kostenlos, kein Konto, keine Kontingente — Keine Anmeldewand, kein Wasserzeichen, kein Tageslimit. Optionale Konten existieren nur, um Favoriten und Voreinstellungen geräteübergreifend zu speichern.
Häufig gestellte Fragen
Kann mein Design hier sicher verwendet werden?
Ja. Dieses Tool läuft vollständig in Ihrem Browser und verwendet JavaScript. Nichts, was Sie einfügen oder öffnen, wird an einen Server gesendet und die Seite behält keine Kopie, nachdem Sie sie geschlossen haben.
Muss ich ein Konto erstellen?
Nein. Jedes Tool ist ohne Anmeldung vollständig nutzbar. Ein Konto fügt nur gespeicherte Favoriten und wiederverwendbare Voreinstellungen hinzu.
Funktioniert es auf einem Telefon?
Ja. Die Benutzeroberfläche ist „Mobile First“ mit großen Touch-Zielen und einem gestapelten Layout, sodass sie sowohl auf Telefonen und Tablets als auch auf Desktops funktioniert.
Wie erstelle ich einen natürlich aussehenden Schatten?
Verwenden Sie eine kleine Negativverteilung, eine große Unschärfe und eine geringe Deckkraft, die mehr nach unten als seitwärts versetzt ist. Das Stapeln von zwei oder drei Ebenen mit geringer Deckkraft sieht normalerweise besser aus als ein schwerer Schatten.
Warum sieht mein Schatten abgeschnitten aus?
Beim übergeordneten Element ist der Überlauf wahrscheinlich ausgeblendet, oder der Schatten ist breiter als die umgebende Polsterung. Fügen Sie einen Rand oder Abstand um das Element hinzu, damit die Unschärfe Platz zum Rendern hat.
Öffnen Sie CSS-Box-Schattengenerator
Probieren Sie es jetzt aus – es läuft in Ihrem Browser und erfordert kein Konto.
Öffnen Sie das Tool