Dix9 CSS Gradient
Générateur de dégradés CSS gratuit

Créez des dégradés CSS uniques en quelques clics

Les dégradés de couleurs sont le secret d'un design web moderne et dynamique. Ils ajoutent de la profondeur, de l'énergie et une touche professionnelle à n'importe quel site. Mais soyons honnêtes : écrire le code CSS à la main peut vite devenir un vrai casse-tête.

C'est pourquoi nous avons créé ce générateur de dégradés CSS avancé.

Cet outil visuel et intuitif vous donne un contrôle total pour créer le dégradé parfait en quelques secondes. Jouez avec les types (linéaire, radial, conique), ajoutez autant de couleurs que vous le souhaitez, ajustez leurs positions avec précision, et laissez votre créativité s'exprimer. Une fois satisfait, copiez le code en un clic et intégrez-le directement dans votre projet WordPress.

Alors, prêt à donner de la vie à vos designs ? Explorez l'outil ci-dessous !

Type de Dégradé

Répéter le dégradé

Angle

Forme (pour radial)

Couleurs & Positions

Bibliothèque de Préréglages

Cet outil vous a été utile ? Partagez-le sur vos réseaux !

Comment utiliser le générateur de dégradés Dix9 CSS Gradient ?

Cet outil est rempli d'options puissantes mais reste très simple d'utilisation. Voici un guide pour maîtriser toutes ses fonctionnalités.

Pour une inspiration instantanée

🎲 Bouton "Surprends-moi !" : Le meilleur moyen de démarrer si vous êtes en panne d'inspiration. Un clic génère un dégradé complet et totalement aléatoire.
Bibliothèque de préréglages : Cliquez sur l'un des aperçus pour charger un dégradé pré-conçu. Ils ont été créés avec les couleurs de notre site pour vous donner un point de départ cohérent.

Les contrôles principaux

Type de Dégradé : Choisissez entre trois types de dégradés pour des effets très différents.
- Linéaire : Une transition droite entre les couleurs.
- Radial : Un dégradé circulaire qui part d'un point central.
- Conique : Un effet "camembert" ou "cône" qui tourne autour d'un point central.
Angle et Position :
- Angle : Pour les dégradés linéaires et coniques, utilisez le curseur ou le champ numérique pour définir l'orientation de votre dégradé.
- Position : Pour les dégradés radiaux et coniques, un carré d'aperçu apparaît au-dessus du grand aperçu. Cliquez ou glissez votre souris à l'intérieur pour définir le point d'origine du dégradé.
Répéter le dégradé : Cochez cette case pour créer des motifs comme des rayures en répétant votre dégradé.

La magie : couleurs & positions

C'est ici que vous avez un contrôle total sur votre création.

Modifier une couleur : Cliquez sur le carré de couleur pour ouvrir le sélecteur.
Ajouter une couleur : Cliquez sur le bouton orange "+ Ajouter une couleur".
Supprimer une couleur : Cliquez sur le bouton "-" qui apparaît (possible uniquement si vous avez plus de deux couleurs).
Ajuster la position : Utilisez le curseur à côté de chaque couleur pour définir précisément sa position dans le dégradé (de 0% à 100%). C'est parfait pour créer des transitions douces ou au contraire très marquées.

Finaliser et Exporter

🔗 Partager : Génère un lien URL unique de votre création. Idéal pour sauvegarder un dégradé ou le partager.
Copier : Le code CSS de votre dégradé s'affiche en temps réel dans le champ en bas à droite. Cliquez sur le bouton "Copier" pour l'intégrer directement dans le CSS de votre site WordPress.

Découvrez nos autres outils gratuits pour créateurs de sites : notre générateur de palettes de couleurs et notre générateur de contenu Lorem Ipsum.