Online CSS Gradient Tool
A CSS Gradient egy vidám kis webhely és ingyenes eszköz, amellyel gradiens hátteret hozhat létre webhelyekhez.
A CSS színátmenetek lehetővé teszik két vagy több meghatározott szín közötti sima átmenetek megjelenítését.
A CSS kétféle színátmenetet határoz meg:
- Lineáris színátmenetek (le/fel/balra/jobbra/átlósan megy)
- Radiális színátmenetek (középpontjuk alapján)
CSS Lineáris színátmenetek
Lineáris színátmenet létrehozásához meg kell határoznia legalább két színütközőt. A színstopok azok a színek, amelyek között sima átmeneteket szeretne megjeleníteni. Beállíthat egy kezdőpontot és egy irányt (vagy egy szöget) a színátmenet effektus mellett.
Szintaxis
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:
