Creador de Degradados CSS
Diseñe degradados CSS personalizados con hasta 5 paradas de color, múltiples direcciones y 3 tipos de degradado, lineal, radial y cónico. Vista previa instantánea y código CSS listo para producción. Ideal para secciones hero, botones, fondos y diseño web moderno.
Creador de Degradados CSS
Diseñe degradados CSS personalizados con hasta 5 paradas de color, múltiples direcciones y 3 tipos de degradado, lineal, radial y cónico. Vista previa instantánea y código CSS listo para producción. Ideal para secciones hero, botones, fondos y diseño web moderno.
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.