Online CSS Gradient Tool
CSS Gradient je šťastný malý web a bezplatný nástroj, který vám umožní vytvořit gradientní pozadí pro webové stránky.
Přechod CSS zobrazit plynulé přechody mezi dvěma nebo více určenými barvami.
CSS definuje dva typy přechodů:
- Lineární přechody (jdou dolů/nahoru/doleva/doprava/diagonálně)
- Radiální přechody (definované jejich středem)
Lineární přechody CSS
Chcete-li vytvořit lineární přechod, musíte definovat alespoň dvě barevné zastávky. Zarážky barev jsou barvy, mezi kterými chcete vykreslit hladké přechody. Můžete také nastavit počáteční bod a směr (nebo úhel) spolu s efektem přechodu.
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:
