Generador de Degradados CSS
Diseña un degradado lineal visualmente con dos selectores de color y un control de ángulo, previsualízalo a cualquier tamaño y copia el snippet CSS listo para pegar en tu hoja de estilos. Si prefieres un archivo de imagen — para emails, presentaciones o exportaciones estáticas — descarga el degradado como PNG a cualquier dimensión sin abrir una herramienta de diseño.
Cómo crear un degradado CSS
- Elige el color inicial con el primer selector. Introduce un hex si necesitas casar con un color de marca.
- Elige el color final igual. Para transiciones suaves, escoge tonos cercanos en la rueda de color.
- Mueve el ángulo para orientar el degradado. 90° es izquierda-derecha, 180° arriba-abajo, 45° diagonal.
- Copia el snippet CSS para tu hoja de estilos, o pulsa Descargar PNG para exportar como imagen ráster.
Casos de uso comunes
- Montar fondos de hero que transicionan entre dos colores de marca sin servir una imagen.
- Crear estados de botón con degradado sutil que sugiera profundidad sin el peso de una sombra.
- Exportar PNG para emails donde el soporte de degradados CSS es inconsistente entre clientes.
- Generar arte de fondo para presentaciones y redes donde necesitas un archivo de imagen, no CSS.
Preguntas frecuentes
¿Por qué se ve bandeado?
Degradados de dos colores sobre un área grande muestran bandas visibles en pantallas de 8 bits por canal. Es una limitación de pantalla, no de la herramienta — para fondos grandes, añade dithering sutil en tu compositor o usa un PNG con ruido mínimo.
¿Puedo añadir más de dos colores?
Esta herramienta se centra en degradados de dos paradas porque cubren la mayoría de usos de UI. Para multi-stop, extiende el snippet CSS manualmente — la sintaxis es linear-gradient(ángulo, color1 0%, color2 50%, color3 100%).
¿Qué tamaño debe tener el PNG?
Ajusta al área donde vivirá el degradado. Para hero, 2560 de ancho cubre Retina; para fondo de botón, 400 suele bastar.
¿Se sube mi trabajo a algún sitio?
No. La vista previa y la exportación corren enteras en el Canvas del navegador. Nada sale del dispositivo.
Sobre los degradados CSS
Un degradado CSS interpola suavemente entre puntos de color a lo largo de una dirección, dando transiciones sin el coste de ancho de banda de un archivo de imagen. Los degradados lineales son la variante más común y la que cubre esta herramienta — eliges dos colores ancla, un ángulo y el navegador calcula la transición matemáticamente a cualquier tamaño de viewport. Para casos donde CSS no se soporta (clientes de correo antiguos, exportaciones de slides, impreso) el PNG es una copia fiel del mismo degradado.
- Dos selectores de color con entrada hex
- Ángulo ajustable de 0 a 360 grados
- Snippet CSS listo para copiar
- Exportación PNG a cualquier dimensión
- Vista previa en vivo al ajustar
- Corre entero en el navegador, sin servidor
Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).
Por Marco B. ·