Online CSS Gradient Tool
CSS Gradient är en glad liten webbplats och gratis verktyg som låter dig skapa en gradientbakgrund för webbplatser.
CSS-gradienter låter dig visa mjuka övergångar mellan två eller fler specificerade färger.
CSS definierar två typer av gradienter:
- Linjära gradienter (går ner/upp/vänster/höger/diagonalt)
- Radiella gradienter (definieras av deras centrum)
CSS linjära gradienter
För att skapa en linjär gradient måste du definiera minst två färgstopp. Färgstopp är de färger du vill göra mjuka övergångar mellan. Du kan också ställa in en startpunkt och en riktning (eller en vinkel) tillsammans med gradienteffekten.
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:
