Générateur de dégradés CSS
Créez des dégradés CSS linéaires et radiaux. Choisissez les couleurs visuellement et copiez le CSS généré.
background: linear-gradient(135deg, #535beb, #7c3aed);
Comment utiliser cet outil
- 1
Click the Color 1 swatch and choose your starting color from the native color picker.
- 2
Click the Color 2 swatch and choose the color the gradient fades into.
- 3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
- 4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.
Qu'est-ce que le générateur de dégradés CSS ?
Les dégradés CSS sont des transitions de couleur entre deux couleurs ou plus. Les dégradés linéaires s'écoulent dans une direction ; les dégradés radiaux émanent d'un point. Ce générateur couvre les cas courants ; pour des dégradés complexes à plusieurs arrêts avec des positions personnalisées, créez-les manuellement.
Cas d'usage courants
Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.
Questions fréquentes
Les dégradés sont-ils efficaces ?▼
Puis-je animer les dégradés ?▼
Outils connexes
Convertisseur de couleur (HEX/RGB/HSL)
Convertissez des couleurs entre les formats HEX, RGB et HSL. Choisissez une couleur visuellement ou saisissez les valeurs manuellement.
Générateur de box-shadow CSS
Créez visuellement des valeurs de box-shadow en CSS. Prévisualisez en temps réel et copiez le CSS généré.
Générateur de courbes d'accélération cubic-bezier
Créez des courbes d'accélération cubic-bezier pour CSS. Inclut des préréglages standard.
Générateur de palettes de couleurs
Générez des palettes de couleurs harmonieuses à partir de n'importe quelle couleur de base. Prend en charge les schémas complémentaires, analogues, triadiques et monochromatiques.
Générateur de border-radius CSS
Créez visuellement des valeurs complexes de border-radius en CSS. Contrôle indépendant de chaque coin.
Générateur de CSS clamp()
Générez des valeurs CSS fluides et responsives avec clamp(). Mise à l'échelle progressive entre des tailles minimale et maximale sur les plages de viewport.