Generador de gradiente CSS
Diseñe degradados suaves visualmente y copie el CSS — sin gris fangoso en el medio.
- Tus datos nunca salen de tu dispositivo
- 100 % gratis
- Sin registro
- Funciona sin conexión después de la primera carga
Cómo hacer un degradado CSS
- Elija lineal, radial o cónico y establecer el ángulo o centro.
- Haga clic en la barra para agregar colores, arrastre para colocarlos y elija colores.
- Copiar el CSS, Tailwind o SVG — o descargar un PNG.
Acerca de Generador de degradados
Diseñe gradientes CSS lineales, radiales y cónicos visualmente.
Todo funciona en su navegador, por lo que es instantáneo y privado. Sus colores y configuraciones recientes se recuerdan en este dispositivo, y la barra de direcciones mantiene su color para que pueda compartirlo o marcarlo.
Ideal para
- Héroes y fondos del sitio web
- Botones, tarjetas y efectos de texto
- Fondos de pantalla y gráficos sociales
Consejo: Elige un preajuste como punto de partida y luego ajusta sus colores.
Preguntas frecuentes
¿Por qué mi degradado se ve gris en el medio?
La mezcla de dos colores opuestos en sRGB pasa a través del gris. — no gris medio” o OKLCH — la herramienta escribe el CSS moderno (lineal-gradient (en oklab …)) más una reserva para los navegadores más antiguos.
¿Cómo agrego o muevo colores?
Haga clic en la barra de degradado para agregar un color, arrastre los controles para moverlos, seleccione uno para cambiar su color, opacidad o posición y presione Delete stop para eliminarlo.
¿Puedo descargar el degradado como una imagen?
Sí — como PNG en 1920 × 1080, 4K, cuadrado, historia o tamaño de banner, o como un archivo SVG.
¿Hacen clases de Tailwind?
Sí — gradientes simples se convierten en bg-gradiente-a- con de/vía/a clases; otros un valor arbitrario bg-[…].
¿Funcionan los gradientes cónicos en todos los navegadores?
Sí — Las versiones actuales de Chrome, Edge, Firefox y Safari admiten gradientes lineales, radiales y cónicos.