CSS-Generator
Gradients, Schatten und Ecken visuell einstellen
Optionen
Ergebnis
background: linear-gradient(135deg, #1fa89c 0%, #7c3aed 100%);
Fügen Sie die kopierte Deklaration direkt in Ihren CSS-Selektor ein.
Schatten- und Gradient-Syntax besteht aus vier oder fünf Zahlen, deren Wirkung sich niemand aus dem Code vorstellen kann. Ziehen Sie an den Reglern, bis die Vorschau stimmt, und nehmen Sie dann die Regel mit.
So funktioniert es
- 1 Wählen Sie aus, was Sie bauen möchten.
- 2 Stellen Sie Regler und Farben ein und beobachten Sie die Vorschau.
- 3 Kopieren Sie das erzeugte CSS.
- 4 Fügen Sie es in Ihren Selektor ein.
Häufige Fragen
Was bedeuten die Box-Shadow-Werte?
Horizontaler Versatz, vertikaler Versatz, Weichzeichnung, Ausdehnung, Farbe. Die Weichzeichnung glättet die Kante; die Ausdehnung vergrößert oder verkleinert den ganzen Schatten vor dem Weichzeichnen. Ein positiver vertikaler Versatz mit geringer Weichzeichnung wirkt wie eine Lichtquelle von oben.
Wie wirkt ein Schatten natürlich?
Halten Sie den horizontalen Versatz nahe null, nehmen Sie einen kleinen positiven vertikalen Versatz und eine Weichzeichnung vom zwei- bis dreifachen dieses Versatzes. Verwenden Sie Schwarz mit geringer Deckkraft statt Grau — graue Schatten wirken auf farbigen Hintergründen flach.
Was bewirkt inset?
Der Schatten wird innerhalb des Elements gezeichnet statt außerhalb, wodurch es eingedrückt statt erhaben wirkt. Nützlich für Eingabefelder und aktivierte Schaltflächen.