Online CSS-verloophulpmiddel
CSS Gradient is een vrolijke kleine website en gratis tool waarmee je een verloopachtergrond voor websites kunt maken.
Met CSS-verlopen kunt u vloeiende overgangen weergeven tussen twee of meer gespecificeerde kleuren.
CSS definieert twee soorten verlopen:
- Lineaire verlopen (gaat omlaag/omhoog/links/rechts/diagonaal)
- Radiale verlopen (gedefinieerd door hun middelpunt)
CSS lineaire verlopen
Om een lineair verloop te maken, moet u minimaal twee kleurstops definiëren. Kleurstops zijn de kleuren waartussen u vloeiende overgangen wilt weergeven. U kunt naast het verloopeffect ook een startpunt en een richting (of een hoek) instellen.
Syntaxis
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:
