Générateur de Dégradés CSS
Créez des dégradés linéaires modernes et copiez directement le code CSS pour vos projets web.
CSS Output
background: linear-gradient(90deg, #4F46E5 0%, #EC4899 100%);Preview
Comprendre les dégradés CSS
Les dégradés permettent d'afficher une transition fluide entre plusieurs teintes. En CSS, ils sont gérés comme des éléments de type background-image, ce qui offre une grande souplesse pour les superpositions visuelles.
Dégradés linéaires (Linear Gradients)
La syntaxe de base combine un angle ou une orientation avec une succession de paliers de couleurs. L'ajustement interactif de l'angle dans l'outil ci-dessus vous permet d'observer la diffusion de la lumière en direct.
Base de Connaissances & FAQ
Foire Aux Questions
Réponses directes et solutions aux questions courantes, défis techniques et normes de l'industrie.
Pourquoi les dégradés CSS paraissent-ils parfois ternes ou grisâtres au centre ?expand_more
Ce phénomène s'appelle la 'zone morte grise'. Lorsque le navigateur interpole deux teintes vives (ex. bleu et jaune) dans l'espace colorimétrique sRGB par défaut, la moyenne mathématique passe par des tons grisâtres désaturés. Solutions :
- Ajouter un palier de couleur intermédiaire harmonieux (ex. vert entre bleu et jaune).
- Ou utiliser la norme moderne CSS Color 4 en OKLCH :
background: linear-gradient(in oklch to right, blue, yellow);qui préserve la saturation perceptuelle.
Comment animer un dégradé CSS au survol (hover) ?expand_more
Les navigateurs ne peuvent pas appliquer de transition directe à la propriété
background-image. La technique recommandée consiste à définir une taille de fond supérieure et à animer background-position : .gradient-btn {
background: linear-gradient(135deg, #4F46E5, #EC4899);
background-size: 200% 200%;
transition: background-position 0.4s ease;
}
.gradient-btn:hover {
background-position: 100% 100%;
}Quelle est la différence entre linear-gradient et radial-gradient en CSS ?expand_more
linear-gradient() crée une transition rectiligne le long d'un axe déterminé par un angle (ex.
90deg) ou une direction (to bottom right). radial-gradient() part d'un point central et rayonne de façon concentrique, idéal pour les effets de projecteur et halos de lumière.Comment concevoir un effet de glassmorphism avec des dégradés CSS ?expand_more
Le glassmorphism associe un dégradé RGBA semi-transparent à un flou d'arrière-plan accéléré par le GPU :
.glass-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
}Les dégradés CSS ont-ils un impact négatif sur les performances des téléphones ?expand_more
Non. Contrairement aux images matricielles lourdes (PNG/WebP), les dégradés CSS sont calculés directement par le GPU. Ils ne requièrent aucune bande passante réseau et consomment une mémoire minimale.