Narzędzie gradientowe CSS online
Gradient CSS to szczęśliwa, mała strona internetowa i darmowe narzędzie, które pozwala tworzyć gradientowe tło dla stron internetowych.
Gradienty CSS umożliwiają wyświetlanie płynnych przejść między dwoma lub więcej określonymi kolorami.
CSS definiuje dwa rodzaje gradientów:
- Gradienty liniowe (w dół/w górę/w lewo/w prawo/ukośnie)
- Gradienty radialne (zdefiniowane przez ich środek)
Gradienty liniowe CSS
Aby utworzyć gradient liniowy, musisz zdefiniować co najmniej dwa stopnie koloru. Stopnie kolorów to kolory, między którymi chcesz renderować płynne przejścia. Możesz także ustawić punkt początkowy i kierunek (lub kąt) wraz z efektem gradientu.
Składnia
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:
