Online CSS Gradient Tool
CSS Gradient er et lykkelig lite nettsted og gratisverktøy som lar deg lage en gradientbakgrunn for nettsteder.
CSS-gradienter lar deg vise jevne overganger mellom til eller flere spesifiserte farger.
CSS definerer til typer gradienter:
- Lineære gradienter (går ned/opp/venstre/høyre/diagonalt)
- Radielle gradienter (definert av midten)
CSS lineær gradienter
For å lage en lineær gradient må du definere minst til fargestopp. Fargestopp er fargene du vil gi jevne overganger mellom. Du kan også angi 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:
