Skip to content

Generateur de degrades CSS

In-browser only Linear, Radial & Conic One-click Copy
⌘/Ctrl+⇧R aleatoire←/→ deplacer arret
deg
#6366f1
%
#a855f7
%
#ec4899
%
Coucher de soleil
Océan
Forêt
Néon
Pastel
Monochrome
background: linear-gradient(
  135deg,
  #6366f1 0%,
  #a855f7 50%,
  #ec4899 100%
);
Generateur de degrades CSS

Degrade · Linéaire · 3

Cmd/Ctrl+Maj+R aleatoire · Echap quitter
Outils associes Voir tout

Apercu

Concevez des degrades CSS visuellement dans votre navigateur

Creez des degrades lineaires, radiaux et coniques visuellement. Ajustez les arrets de couleur, choisissez un espace colorimetrique et copiez le CSS.

  • Dégradés linéaires, radiaux et coniques
  • Sélecteur HSB avec pipette
  • Espaces colorimétriques OKLCH et LCH
  • Export SVG et Tailwind
  • Liens partageables
  • Superposition de contraste WCAG
  • 24 préréglages sélectionnés
  • S'execute entierement dans votre navigateur
  • Aucune donnee n'est telechargee ni stockee
  • Fonctionne hors ligne une fois charge
  • Aucun compte ni connexion requis
  • Creer des arriere-plans CSS avec degrade
  • Concevoir des en-tetes et bannieres
  • Styliser boutons et cartes avec des degrades
  • Explorer les degrades lineaires, radiaux et coniques
  • Copier le CSS du degrade ou la config Tailwind

Comment utiliser

Créez votre dégradé en quatre étapes

  1. 1
    Choisissez le type de dégradé

    Sélectionnez Linéaire, Radial ou Conique en haut de l'outil.

  2. 2
    Ajoutez des arrêts de couleur

    Faites glisser les poignées sur la piste. Double-cliquez pour ajouter un nouvel arrêt.

  3. 3
    Ajustez l'angle et l'espace colorimétrique

    Définissez l'angle avec la saisie numérique ou les boutons de direction. Choisissez un espace colorimétrique.

  4. 4
    Copiez votre CSS

    L'aperçu CSS se met à jour en temps réel. Cliquez sur Copier le CSS ou utilisez le menu Exporter.

Questions fréquentes

Quelle est la différence entre dégradés linéaires, radiaux et coniques ?
Un dégradé linéaire passe d'une couleur à une autre le long d'une ligne droite. Un dégradé radial rayonne depuis un point central. Un dégradé conique fait pivoter les couleurs autour d'un centre.
Que signifie "espace colorimétrique" dans les dégradés CSS ?
L'espace colorimétrique détermine comment les couleurs intermédiaires sont calculées. sRGB est le plus compatible. oklch produit des transitions plus uniformes et vibrantes.
Puis-je exporter en SVG ?
Oui. Ouvrez le menu Exporter et cliquez sur Télécharger SVG.
Comment créer un lien partageable ?
Cliquez sur Partager le lien dans le menu Exporter. L'état complet du dégradé est encodé dans le hash de l'URL.