Créateur de Dégradés CSS
Concevez des dégradés CSS personnalisés avec jusqu'à 5 arrêts de couleur, plusieurs directions et 3 types de dégradé, linéaire, radial et conique. Aperçu instantané et code CSS prêt pour la production. Idéal pour les sections héros, boutons, arrière-plans et design web moderne.
Créateur de Dégradés CSS
Concevez des dégradés CSS personnalisés avec jusqu'à 5 arrêts de couleur, plusieurs directions et 3 types de dégradé, linéaire, radial et conique. Aperçu instantané et code CSS prêt pour la production. Idéal pour les sections héros, boutons, arrière-plans et design web moderne.
0%100%
°
1
%
2
%
3
%
@%
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);How to Use the Gradient Maker
- 1Pick a gradient type. Choose Linear, Radial, or Conic from the top-left buttons. Linear goes in a straight line, Radial spreads from a center point, and Conic rotates around a center.
- 2Set the direction. For Linear, type an angle (e.g. 90 for left-to-right). For Radial or Conic, pick a position like center or top left.
- 3Click the gradient bar to add stops. Each click adds a new color point. Drag the markers left or right to change where colors blend.
- 4Edit any stop. Below the gradient bar you'll see a card for each color stop. Click one to select it, then change its color, type a hex value, or adjust the position percentage. Use the trash icon to remove a stop.
- 5Copy the CSS. When you're happy, click the copy icon next to the CSS code at the bottom. Paste it into your stylesheet and you're done.