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

Choisissez les couleurs. Copiez le CSS. Terminé.

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

GradientLab vous aide à créer de beaux dégradés CSS sans écrire de code à la main. Choisissez deux couleurs, définissez la direction et prévisualisez instantanément le résultat. L'outil prend en charge les types de dégradés linéaires et radiaux, vous permettant de passer de l'un à l'autre en un seul clic. Une fois satisfait du rendu, copiez le CSS prêt pour la production et collez-le directement dans votre feuille de style ou votre config Tailwind. Tout fonctionne localement dans votre navigateur, votre travail reste donc privé.

Dégradés linéaires et radiaux expliqués

Un dégradé linéaire effectue la transition entre les couleurs le long d'une ligne droite à un angle spécifique, idéal pour les arrière-plans, les sections principales et les bannières. Un dégradé radial rayonne vers l'extérieur depuis un point central, parfait pour les effets de projecteur et les éléments d'interface circulaires. GradientLab vous permet de contrôler l'angle des dégradés linéaires et de prévisualiser l'option radiale en temps réel, afin de comparer les deux styles avant de vous décider.

Préréglages, aléatoire et copie du CSS

Vous ne savez pas par où commencer ? Parcourez 12 préréglages de dégradés sélectionnés pour le design web moderne, ou appuyez sur le bouton Aléatoire pour découvrir des combinaisons de couleurs inattendues. Chaque préréglage est entièrement modifiable, vous pouvez l'utiliser comme point de départ et affiner les couleurs et l'angle. Quand vous êtes prêt, le bouton de copie en un clic place la règle CSS complète dans votre presse-papiers, y compris la couleur d'arrière-plan de secours pour les anciens navigateurs.

Besoin de choisir des couleurs exactes d'abord ? Essayez le Sélecteur de couleurs pour trouver les valeurs HEX ou RGB parfaites. Une fois votre design finalisé, encadrez vos captures d'écran avec l'outil Screenshot Mockup pour présenter votre dégradé dans un cadre de navigateur élégant pour les portfolios et les réseaux sociaux.

Generate a matching favicon using the favicon generator or optimize your exported images with the image compressor.