CSS-Schatten-Generator
Schatteneinstellungen
Voreinstellungen
Schattenvorschau
CSS-Code
.element {
box-shadow: 0px 10px 20px rgba(0, 0, 0, 1);
}
? Häufig gestellte Fragen
Welche CSS-Schatteneigenschaften kann ich generieren?
Das Werkzeug erzeugt Schlagschatten (für Elemente) und Textschatten (für Text). Sie können den horizontalen/vertikalen Versatz, den Weichzeichnungsradius, den Ausbreitungsradius (nur für Schlagschatten), die Farbe und die Tiefe der Schatten anpassen. Mehrere Schatten können übereinandergelegt werden.
Wie erzeuge ich realistische Schatteneffekte?
Realistische Schatten erzeugen durch die Verwendung mehrerer übereinanderliegender Schatten mit unterschiedlichen Unschärfe- und Deckkraftwerten reales Licht. Beginnen Sie mit einem scharfen, dunklen Schatten nahe am Objekt und fügen Sie dann weichere, hellere Schatten hinzu, um Tiefe zu erzeugen.
Was ist der Unterschied zwischen Unschärfe und Streuung?
Der Weichzeichnungsradius steuert, wie weich die Schattenkanten sind (größer = weicher). Der Streuungsradius vergrößert oder verkleinert den Schatten vor dem Weichzeichnen. Die Streuung ist nur für Boxschatten, nicht für Textschatten verfügbar.
Kann ich innere Schatten erschaffen?
Ja! Das Schlüsselwort „inset“ erzeugt innere Schatten, die innerhalb des Elements erscheinen und so einen vertieften oder eingelassenen Eindruck erzeugen. Dies eignet sich hervorragend zur Darstellung von gedrückten Schaltflächen oder vertieften Flächen.
Wird die Live-Vorschau angezeigt?
Ja, der Generator bietet eine visuelle Echtzeitvorschau, während Sie die Schattenparameter anpassen. Sie sehen genau, wie der Schatten aussieht, und können den generierten CSS-Code direkt in Ihr Stylesheet kopieren.
Sind meine Daten sicher?
Ja, absolut! Dieses Tool läuft vollständig in Ihrem Browser. Die gesamte Datenverarbeitung findet lokal auf Ihrem Gerät statt – es werden keine Daten auf unsere Server hochgeladen. Ihre Dateien und Daten verlassen Ihren Computer niemals, wodurch absolute Privatsphäre und Sicherheit gewährleistet sind.