Strumento gradiente CSS online
CSS Gradient è un piccolo sito Web allegro e uno strumento gratuito che ti consente di creare uno sfondo sfumato per i siti Web.
I gradienti CSS consentono di visualizzare transizioni uniformi tra due o più colori specificati.
I CSS definiscono due tipi di gradienti:
- Gradienti lineari (in basso/in alto/a sinistra/a destra/in diagonale)
- Gradienti radiali (definiti dal loro centro)
Gradienti lineari CSS
Per creare un gradiente lineare è necessario definire almeno due interruzioni di colore. Le interruzioni di colore sono i colori tra i quali si desidera eseguire il rendering delle transizioni uniformi. Puoi anche impostare un punto di partenza e una direzione (o un angolo) insieme all'effetto sfumatura.
Sintassi
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:
