Online CSS-gradientværktøj
CSS Gradient er en glad lille hjemmeside og gratis værktøj, der lader dig oprette en gradient baggrund til websteder.
CSS-gradienter lader dig vise jævne overgange mellem to eller flere specificerede farver.
CSS definerer to typer gradienter:
- Lineære gradienter (går ned/op/venstre/højre/diagonalt)
- Radiale gradienter (defineret ved deres centrum)
CSS lineære gradienter
For at oprette en lineær gradient skal du definere mindst to farvestop. Farvestop er de farver, du ønsker at give jævne overgange imellem. Du kan også indstille et startpunkt og en retning (eller en vinkel) sammen med gradienteffekten.
Syntaks
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:
