Générateur de dégradé CSS
Créez des dégradés linéaires ou radiaux et exportez-les en tant que CSS, Tailwind ou PNG.
Use this CSS gradient generator to build linear or radial gradients with full control over color stops, angle, and sizing. Start from a preset palette or build your own, then copy clean CSS or Tailwind classes for immediate use in design systems. Need static exports? Set the exact output size and download PNGs that match your hero, banner, or background dimensions. The live preview makes it easy to align brand colors, and the export tools keep your workflow fast—no plug‑ins, no uploads, and no login required.
Contrôles
Presets
0°90°180°270°360°
Taille de l'image
Utile pour l'alignement pendant l'édition. Les images exportées correspondent toujours aux couleurs visibles.
Exporter
Code Preview
.gradient {
background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]Aperçu en direct
1920×1080
Arrêts de couleur
0%50%100%
Edit Color Stop
Comment utiliser
- • Faites glisser les couleurs sur la ligne de temps pour ajuster les positions
- • Cliquez sur les couleurs pour les sélectionner et modifier leurs couleurs
- • Choisissez parmi des palettes prédéfinies pour des schémas de couleurs rapides
- • Ajustez l'angle ou la forme du dégradé dans les Contrôles
- • Exportez au format PNG ou copiez le code CSS/Tailwind