Générateur de gradient CSS : linéaire, radial, conique (et le piège à angle)

J'ai perdu la majeure partie d'un après-midi à cause d'un gradient une fois. Pas compliqué - un arrière-plan de héros sur une page marketing de WP Adminify, le bleu de la marque se transformant en orange de marque, en diagonale. J'ai écrit linear-gradient(45deg, #4466EE, #E99537) Et ça s'est passé dans le mauvais sens. Alors j'ai essayé -45deg. Aussi faux. à ce moment- 135deg, ce qui était vrai, et j'ai déménagé sans comprendre pourquoi, ce qui est le pire résultat possible car cela garantit que vous vous tromperez à nouveau.

La raison en est que les angles de gradient CSS ne sont pas les angles que vous avez appris en cours de mathématiques. 0deg points en l'air, et l'angle augmente dans le sens des aiguille. En trigonométrie - et en SVG, et en toile - 0 point à droite et les angles augmentent dans le sens inverse des aiguilles d'une montre Deux conventions différentes, une d'apparence identique deg unité et aucun message d'erreur lorsque vous choisissez le mauvais. C'est écrit clairement dans Images du module CSS Niveau 3, et je ne l'avais tout simplement jamais lu.

C'est le cas pour un générateur visuel dans une anecdote. le Générateur de gradient sur Toolz.dev vous offre un aperçu en direct, des arrêts de couleurs dragables et un CSS copiable pour les dégradés linéaires, radiaux et coniques - de sorte que la question d'angle se répond au lieu de vous coûter un après-midi.

tl;dr : En CSS, 0deg pointe vers le élite et les angles courent dans le sens des aiguille, donc to right égaux 90deg et une diagonale en haut à gauche → en bas à droite est 135deg, pas 45deg. manier Générateur de gradient le voir plutôt que de le deviner, et le cueillette de couleurs Pour choisir des arrêts qui ne deviennent pas boueux au milieu. Les gradients sont <image> valeurs - partout où vous pouvez utiliser url(), vous pouvez utiliser un dégradé. Tout côté client, pas d'inscription.

Qu'est-ce qu'un gradient CSS, techniquement ?

Un dégradé n'est pas une couleur. C'est un imaginer. Ce fait unique explique la plupart de la syntaxe.

selon Images CSS Niveau 3, linear-gradient(), radial-gradient(), et leurs variantes répétées produisent une valeur de type <image>. Cela signifie que partout où la spécification accepte url('photo.jpg'), il accepte également un dégradé : background-image, border-image, list-style-image, mask-image, content. Cela signifie également que les gradients ont Pas de dimensions intrinsèques- ils s'étirent pour remplir la boîte dans laquelle vous les mettez, c'est pourquoi le même dégradé est différent sur un bouton 200 px et un héros 1400 px.

conic-gradient() est venu plus tard et vit dans Images CSS Niveau 4, à côté de la syntaxe interpolation-espace-couleur, j'irai ci-dessous.

Quelle est la différence entre linéaire, radial et conique ?

Gradients linéaires - et convention d'angle

/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);

/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);

/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537);   /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537);  /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537);  /* top-left → bottom-right */

Conservez ceci en mémoire et vous ne répéterez jamais mon après-midi :

Il y a une subtilité de plus avec les mots-clés de coin. to bottom right FAIRE non signifie simplement 135deg. La spécification la définit comme un angle choisi de sorte que la ligne de gradient soit perpendiculaire à la autre diagonale - ce qui signifie sur une boîte non carrée, to bottom right et 135deg produire des résultats visiblement différents. Sur un carré, ils sont identiques. C'est le genre de chose que vous remarquez à 23 heures lorsqu'une carte semble correcte dans la conception et mauvaise dans une colonne étroite.

Gradients radiaux - où vivent les mots-clés de taille

/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);

/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);

Les quatre mots-clés de taille décident où final Terrains d'arrêt de couleur, mesurés à partir du centre :

• closest-side- le bord le plus proche de la boîte
• farthest-side- le bord le plus éloigné
• closest-corner- le coin le plus proche
• farthest-corner- le coin le plus éloigné (c'est la valeur par défaut)

Changer le mot-clé et le dégradé ressemble à un autre dégradé. C'est la raison la plus courante pour laquelle un gradient radial "ne fera pas ce que je veux", et il est beaucoup plus rapide de cliquer sur les quatre options de la Générateur de gradient que de raisonner à ce sujet.

Dégradés coniques - tartes, roues et anneaux

Conique balaye la couleur vers le centre, à partir de 12 o&#39 ; horloge et dans le sens des aiguilles d'une montre (même convention que linéaire - du moins it&#39 ; est cohérente).

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
  #4466EE 0deg 144deg,
  #E99537 144deg 270deg,
  #34D399 270deg 360deg
);

/* Progress ring: conic + a mask */
.ring {
  background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
  border-radius: 50%;
}

celui mask Line est l'astuce derrière chaque indicateur de progression de beignes que vous ayez jamais vu, et il s'agit d'environ six lignes de CSS au lieu d'une bibliothèque SVG.

Comment puis-je contrôler l'endroit où les couleurs atterrissent ?

La couleur s'arrête

Donnez une position d'arrêt et vous contrôlez la transition. stopper deux positions et vous obtenez un avantage dur - aucune interpolation du tout.

/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);

/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);

/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
  to right,
  #4466EE 0 25%,
  #E99537 25% 50%,
  #34D399 50% 75%,
  #0F172A 75% 100%
);

Conseils d'interpolation (le point médian que vous ne saviez pas pouvoir déplacer)

Un pourcentage nu entre Deux couleurs déplacent le milieu 50/50. C'est le morceau de syntaxe de dégradé le plus sous-utilisé que je connaisse :

/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);

/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);

Utilisez-le pour les canevas d'images. un to top, rgba(0,0,0,.8), transparent La superposition consomme généralement trop de photos ; laissez tomber un 35% Astuce et l'obscurité s'effondre vers le bas où se trouve la légende.

Répéter les gradients pour les modèles

.hatched {
  background: repeating-linear-gradient(
    45deg,
    #0F172A 0 10px,
    #1E293B 10px 20px
  );
}

Une ligne, pas de fichier image, évolutif à l'infini Juste don&#39 ; ne l'appliquez pas à un élément pleine page et puis demandez pourquoi le défilement bégaie sur un Android de milieu de gamme - repeindre un grand gradient répétitif pendant le défilement est un vrai travail pour le compositeur.

Pourquoi mon dégradé a-t-il l'air boueux au milieu ?

Deux causes distinctes, et les gens les confondent constamment.

Cause 1 : interpolation sRGB

Par défaut, les navigateurs mélangent les arrêts de gradient en sRGB, canal par canal Pour deux couleurs qui se trouvent l'une près de l'autre sur la roue - bleu à violet, orange à rouge - ça&#39 ; c'est bien Pour les couleurs complémentaires, cela produit une bande gris mort au milieu, car le milieu mathématique de deux couleurs sRGB opposées est Près de gris. Le bleu au jaune est le délinquant classique.

Images CSS Le niveau 4 corrige ce problème en vous permettant de nommer l'espace d'interpolation :

/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);

/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);

oklch Maintient la légèreté et la chroma perçues dans le mélange. Prise en charge du navigateur pour le in <colorspace> La syntaxe est bonne dans Chrome, Safari et Firefox actuels, mais si vous devez prendre en charge les anciens navigateurs, l'ancien problème est l'ancienne solution manuelle : ajoutez un arrêt intermédiaire et dirigez-vous le mélange vous-même.

Cause 2 : Faute de transparent- et ma deuxième erreur

transparent est défini comme rgba(0, 0, 0, 0). transparent noircir. Si les navigateurs interviennent naïvement, linear-gradient(#E99537, transparent) glisserait à travers de plus en plus foncé, plus orange, sur son chemin vers rien.

Navigateurs modernes don&#39 ; ne faites pas cela - la spécification nécessite une interpolation prémultiplié Alpha Space, qui évite complètement le problème. Mais Webkit plus ancien ne l'a pas fait, et j'ai expédié un héros sur un site client qui avait l'air propre sur ma machine et qui ressemblait à une sale tache sur leur iPad de deux ans. La version Bulletproof, qui ne vous coûte rien et qui fonctionne toujours partout :

/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));

Je l'écris toujours de cette façon à partir de tissu cicatriciel.

Que dois-je surveiller avec l'accessibilité ?

Le contraste doit être maintenu sur l'ensemble du gradient

WCAG 2.1 SC 1.4.3 Nécessite 4,5: 1 pour le texte normal et 3: 1 pour le texte volumineux (18 pt ou 14 pts). Un dégradé signifie que la couleur de votre arrière-plan est différente à chaque pixel, de sorte que la condition doit être respectée par rapport à la dans le pire des cas point - le patch le plus clair si votre texte est blanc, le plus sombre s'il&#39 ;s noir.

Le modèle fiable est d'arrêter d'essayer de rendre le dégradé lui-même lisible et de superposer un canevas sur le dessus :

.hero {
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
    linear-gradient(135deg, #4466EE, #E99537);
  color: #fff;
}

Maintenant, le texte se trouve sur une plage sombre connue, peu importe ce que fait le gradient en dessous. Vérifiez les extrémités avec le cueillette de couleurs avant votre expédition, la procédure pas à pas complète, y compris la couleur de la marque que j'ai expédiée à 2,38 :1, est dans le Guide de sélection de couleurs.

Le texte de dégradé est une trappe

C'est celui qui m'a réellement brûlé sur une page de destination de production :

.gradient-heading {
  background: linear-gradient(135deg, #4466EE, #E99537);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

si background-clip: text does&#39 ; ne s'applique pour aucune raison - un ancien navigateur, une extension bloquant les images d'arrière-plan, une feuille de style d'impression - vous et #39 ; vous restez avec color: transparent et un En-tête invisible. Le texte est toujours dans le DOM, donc un lecteur d'écran le lit avec joie et vous n'avez aucune idée que quelque chose ne va pas. manier @supports Pour le refermer :

.gradient-heading { color: #0F172A; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-heading {
    background: linear-gradient(135deg, #4466EE, #E99537);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

Couleur unie Par défaut, dégradé comme amélioration. C'est comme ça que ça aurait dû être écrit la première fois.

Les dégradés animés ont besoin d'une trappe d'évacuation de mouvement

Vous ne pouvez pas passer le gradient de transition couleurs- le navigateur a gagné et n°39 ; t interpolent entre deux <image> valeurs. Ce que les gens animent à la place, c'est background-position sur un dégradé surdimensionné :

.animated {
  background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
  background-size: 600% 600%;
  animation: shift 12s ease infinite;
}

@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

Ce dernier bloc n'est pas facultatif. Le mouvement de fond continu est un déclencheur documenté pour les troubles vestibulaires et l'honneur prefers-reduced-motion est trois lignes.

(L'alternative moderne consiste à enregistrer une propriété personnalisée auprès de @property Son type est donc connu et par conséquent Animable, puis l'utiliser à l'intérieur du dégradé. C'est propre, c'est pris en charge dans les navigateurs actuels, et ça vaut toujours la peine d'avoir la garde à mouvement réduit.)

Comment en construire un avec l'outil ?

1. Ouvrez le Générateur de gradient.
2. Choisissez un type - linéaire, radial ou conique.
3. Cliquez sur un arrêt pour changer de couleur ; faites-le glisser pour déplacer sa position. Cliquez sur la barre pour ajouter un arrêt ; faites-le glisser pour le supprimer.
4. Pour linéaire, faites glisser l'angle. Regardez le numéro : c'est là que le 0deg-Is-Up Convention cesse d'être abstrait.
5. Pour Radial, cyclez les quatre mots-clés de taille et observez ce qui change. C'est le moyen le plus rapide de créer une intuition pour eux.
6. Copiez le CSS.

Deux couleurs sont généralement la bonne réponse. Chaque dégradé que j'ai regretté avait cinq arrêts.

Dégradés qui valent la peine d'être volés

/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);

/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);

/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);

/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
  radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
  radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
  radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);

/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);

Introduisez vos propres couleurs de marque dans le cueillette de couleurs tout d'abord, prenez les valeurs HSL, puis faites varier la légèreté plutôt que la teinte - c'est ainsi que vous obtenez des arrêts qui se mélangent proprement au lieu de vous battre.

Questions fréquentes

Pourquoi mon gradient CSS va-t-il dans la mauvaise direction ?

Parce que les angles de gradient CSS commencent à élite et augmenter dans le sens des aiguille, contrairement à la trigonométrie, au SVG ou au canevas, qui commence par la droite et passe dans le sens inverse des aiguilles d'une montre. to right est 90deg, to bottom est 180deg, et une diagonale en haut à gauche et en bas à droite est 135deg, pas 45deg.

ai-je encore besoin -webkit- Préfixes pour les gradients CSS ?

pas pour linear-gradient(), radial-gradient(), ou conic-gradient()- les trois fonctionnent sans préfixe dans chaque navigateur actuel Le seul endroit où le préfixe gagne encore son donjon est -webkit-background-clip: text Pour le texte de dégradé, où Safari plus ancien en a besoin. Envoyez-y les deux déclarations.

Puis-je animer un gradient CSS ?

Pas la valeur du gradient elle-même - un gradient est un <image>, et le navigateur n'interviendra pas entre deux images. La solution de contournement standard consiste à rendre le dégradé beaucoup plus grand que sa boîte (background-size: 600% 600%) et animer background-position. L'approche moderne enregistre une propriété personnalisée avec @property Il a donc un type connu et devient animable à l'intérieur du gradient. Dans tous les cas, gardez-le avec prefers-reduced-motion.

Pourquoi mon dégradé est-il gris ou boueux au milieu ?

Presque toujours, l'interpolation sRVB entre les couleurs qui se font face sur la roue - du bleu au jaune est le classique. Leur point médian sRVB est véritablement proche du gris. Réparez-le en nommant un meilleur espace d'interpolation, linear-gradient(in oklch, to right, blue, yellow), ou en ajoutant un arrêt intermédiaire pour diriger le mélange vous-même.

Pourquoi la décoloration à transparent Vous avez l'air sale ?

transparent est défini comme rgba(0, 0, 0, 0)- transparent noircir. Les navigateurs actuels s'interposent dans l'espace alpha prémultiplié, de sorte que ce n'est plus un problème, mais Webkit plus ancien a fait glisser le dégradé dans le gris lors de son départ. Si vous prenez en charge les anciens appareils, écrivez explicitement la version zéro-alpha de votre propre couleur : rgba(233, 149, 55, 0) au lieu de transparent.

Comment créer une frontière dégradée ?

Deux options. border-image: linear-gradient(135deg, #4466EE, #E99537) 1; est une ligne mais tue silencieusement border-radius. Si vous avez besoin de coins arrondis, superposez deux arrière-plans avec des background-clip et background-origin valeurs, ou placez le gradient sur un pseudo-élément derrière la boîte.

Les gradients CSS sont-ils mauvais pour les performances ?

Un gradient statique est bon marché - moins cher que le téléchargement d'une image équivalente, et il évolue gratuitement à n'importe quelle taille. Les coûts apparaissent lorsqu’un gradient important doit l’être repeint Répétition : un dégradé répétant pleine page pendant le défilement, ou plusieurs dégradés de couches sous un backdrop-filter. Si une page semble collante sur mobile, c'est la première chose que je vérifierais dans DevTools'Pein Profiler.

Combien de stops de couleur un dégradé devrait-il avoir ?

Deux, la plupart du temps. Trois lorsque vous souhaitez diriger le mélange à travers une teinte spécifique. Au-delà de cela, vous recherchez généralement quelque chose qu'un dégradé de maillage (plusieurs radiaux positionnés) fait mieux, et chaque arrêt supplémentaire est une chose de plus qui peut sembler fausse sur l'écran de quelqu'un d'autre.

Comment créer une formation en gradient en CSS ?

Réglez le background (ou background-image) propriété d'une fonction de gradient. background: linear-gradient(to right, #4466EE, #E99537); Peint un mélange de gauche à droite sans aucun fichier image. radial-gradient() et conic-gradient() Suivez le même modèle pour les mélanges circulaires et balayés. Parce que le résultat est généré plutôt que téléchargé, il reste net à n'importe quelle taille.

Comment créer du texte dégradé dans CSS ?

Mettez le dégradé background, puis définissez background-clip: text (avec le -webkit- préfixe pour Safari) et color: transparent, afin que les lettres soient remplies par le dégradé au lieu d'une couleur unie. Gardez le texte réel dans le balisage plutôt que de le cuire dans une image, afin qu'il reste sélectionnable et lisible par les lecteurs d'écran.

arrivée

Les gradients sont l'une des rares fonctionnalités CSS qui vous offrent une réelle richesse visuelle pour un coût réseau nul - pas de demande d'image, pas de problèmes de rapport d'aspect, indépendant de la résolution par construction La syntaxe est petite Les pièges sont spécifiques et connaissables : la convention d'angle, les mots-clés de taille radiale, la confusion sRGB et la trappe à tête invisible en texte dégradé.

Construisez-les là où vous pouvez les voir. le Générateur de gradient est gratuit, s'exécute entièrement dans votre navigateur et copie CSS Clean CSS. associez-le à la cueillette de couleurs Pour les arrêts qui retiennent leur contraste, et le CSS Minifier Lorsque vous êtes prêt à l'intégrer. Le reste de l'étagère frontale est dans Guide des outils de productivité des développeurs.