Online-CSS-Verlaufstool
CSS Gradient ist eine fröhliche kleine Website und ein kostenloses Tool, mit dem Sie einen Hintergrund mit Farbverlauf für Websites erstellen können.
Mit CSS-Verläufen können Sie sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen.
CSS definiert zwei Arten von Farbverläufen:
- Lineare Farbverläufe (nach unten/oben/links/rechts/diagonal)
- Radiale Farbverläufe (definiert durch ihre Mitte)
CSS Lineare Farbverläufe
Um einen linearen Verlauf zu erstellen, müssen Sie mindestens zwei Farbstopps definieren. Farbstopps sind die Farben, zwischen denen Sie glatte Übergänge rendern möchten. Sie können zusammen mit dem Verlaufseffekt auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen.
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
