Outil de dégradé CSS en ligne
CSS Gradient est un petit site Web joyeux et un outil gratuit qui vous permet de créer un arrière-plan dégradé pour les sites Web.
Les dégradés CSS vous permettent d'afficher des transitions fluides entre deux ou plusieurs couleurs spécifiées.
CSS définit deux types de dégradés :
- Dégradés linéaires (descend/haut/gauche/droite/diagonale)
- Dégradés radiaux (définis par leur centre)
Dégradés linéaires CSS
Pour créer un dégradé linéaire, vous devez définir au moins deux arrêts de couleur. Les arrêts de couleur sont les couleurs entre lesquelles vous souhaitez rendre des transitions fluides. Vous pouvez également définir un point de départ et une direction (ou un angle) avec l'effet de dégradé.
Syntaxe
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:
