Aller à l'outil
JoeLucky

Cliquez sur ★ pour enregistrer un outil

Catégories d'outils

Code en imageGénérateur de dégradés CSSGlassmorphism CSSGénérateur de box-shadowGénérateur de loaders CSSGénérateur de blobs SVGSVG en PNGVérificateur de contrasteConvertisseur PX / REM / EM
JoeLucky

Des outils en ligne pratiques, tous au même endroit

Politique de confidentialitéConditions d'utilisation

© 2026 JoeLucky®. Tous droits réservés.

  1. JoeLucky
  2. /CSS et design
  3. /Générateur de dégradés CSS

Générateur de dégradés CSS

Créez des dégradés linéaires, radiaux et coniques et copiez le CSS aussitôt.

deg
0%
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

CSS ET DESIGN SIMILAIRES

Tout voir
Code en image

Transformez vos extraits de code en captures d'écran soignées.

Ouvrir →
Glassmorphism CSS

Générez le code d'un flou d'arrière-plan et d'une bordure translucide en direct.

Ouvrir →
Générateur de box-shadow

💬 Commentaires

?

Aucun commentaire pour le moment. Soyez le premier !

QU'EST-CE QUE Générateur de dégradés CSS ?

Le générateur de dégradés CSS vous permet de concevoir des dégradés linéaires, radiaux et coniques en temps réel — ajustez les arrêts de couleur, l'angle et les positions, puis copiez le CSS prêt à l'emploi.

Fonctionnalités

  1. 3 types de dégradés : linéaire (directionnel), radial (du centre vers l'extérieur) et conique (rotationnel — idéal pour les diagrammes circulaires et les roues de couleurs).
  2. Contrôle de l'angle : réglez 0–360° pour les types linéaire et conique avec un curseur ou une saisie numérique précise ; le bouton de rotation ajoute 45° à chaque clic.
  3. Arrêts de couleur : chaque arrêt a son propre sélecteur de couleur et curseur de position (0–100 %). Minimum 2 arrêts — ajoutez-en autant que vous le souhaitez.
  4. 10 préréglages sélectionnés dont Sunset, Ocean, Aurora et Conic Pride — cliquez pour charger un préréglage comme point de départ.
  5. Grand aperçu en direct : le panneau d'aperçu de 192 px et la fine barre de dégradé se mettent à jour instantanément pendant la modification.
  6. Copie CSS en un clic : obtenez le CSS complet background: gradient(...); prêt à coller dans n'importe quelle feuille de style ou attribut style.

Comment l'utiliser ?

  1. Choisissez un type de dégradé, définissez les arrêts de couleur et l'angle, ou partez d'un préréglage.
  2. Vérifiez l'aperçu et ajoutez ou retirez des arrêts de couleur selon les besoins.
  3. Copiez le CSS généré.

Questions fréquentes

Quels types de dégradés sont pris en charge ?

Les dégradés linéaires, radiaux et coniques.

Comment copier le CSS généré ?

Cliquez sur le bouton de copie à côté de la zone de code.

Puis-je ajouter plusieurs arrêts de couleur ?

Oui. Faites glisser ou ajoutez/supprimez des poignées d'arrêt de couleur sur le curseur du dégradé.

Créez des ombres douces et superposées avec un aperçu interactif.

Ouvrir →