Générateur de dégradés CSS (calques, répétition)
Créez des dégradés linéaires, radiaux et coniques, superposez plusieurs calques, déplacez les points de couleur, réglez l’angle, le centre, la transparence et la répétition, puis copiez le CSS
Chargement de l’outil…
Compose un arrière-plan à partir de quatre dégradés linéaires, radiaux ou coniques superposés au maximum et fournit le CSS background-image. Les calques translucides donnent des effets de lumière ou de maillage, la répétition donne des rayures et des anneaux, et l’image peut être enregistrée en PNG.
Mode d’emploi
- Partez d’une vignette des « Préréglages » ou du réglage par défaut. Dans « Calques », sélectionnez le calque à modifier et réglez « Type », « Angle » et « Répétition ».
- Pour les calques radiaux et coniques, cliquez ou faites glisser dans l’aperçu pour déplacer le centre, puis choisissez « Forme » et « Taille ».
- Cliquez sur la barre « Points de couleur » pour ajouter un point et faites glisser un cercle pour le déplacer. Réglez en dessous la couleur, l’« Opacité », la « Position » et le « Point médian » du point sélectionné.
- Appuyez sur « Ajouter un calque » pour superposer un calque translucide ; réorganisez les calques ou utilisez « Masquer » pour comparer.
- Appuyez sur « Copier » à côté du CSS, ou choisissez une « Taille du PNG » et appuyez sur « Enregistrer en PNG ».
Fonctionnement
- Le résultat est une seule déclaration background-image ; les calques sont dessinés de haut en bas dans l’ordre du CSS. Les couleurs translucides sont écrites sous la forme rgb(r g b / a).
- Le point médian est l’indication de transition CSS qui déplace l’endroit où deux points se mélangent à parts égales. La répétition reproduit la portion allant du premier au dernier point, comme repeating-linear-gradient.
- Les angles et les mots-clés de taille radiale suivent CSS Images 3, et les couleurs se mélangent en sRGB comme le font les navigateurs par défaut. Le PNG est dessiné dans le navigateur avec les mêmes règles.
- Vos calques et vos points restent enregistrés dans ce navigateur.
Questions fréquentes
- Comment superposer plusieurs dégradés en CSS ?
- Listez-les dans background-image en les séparant par des virgules. Le premier est dessiné au-dessus, les calques supérieurs ont donc besoin d’un peu de transparence. Le champ CSS écrit cette forme.
- Comment créer un arrière-plan rayé ?
- Activez « Répétition » et placez deux points de la même couleur à la même position pour obtenir un bord net. Le préréglage « Rayures » est un bon point de départ.
- Le milieu de mon dégradé paraît terne. Que faire ?
- Activez « Point médian » pour déplacer le point de mélange, ou ajoutez au milieu un point de la couleur souhaitée. Des couleurs complémentaires mélangées tirent vers le gris.
- L’aperçu et le PNG peuvent-ils différer ?
- L’aperçu est dessiné par le navigateur à partir du CSS ; le PNG est calculé avec les mêmes règles. À l’arrondi près, ils sont identiques.