Generador de degradado CSS online y gratuito. Crea degradados lineales y radiales, ajusta dirección, colores y paradas. Copia el código. En el navegador.
Generador gratuito de gradientes CSS. Diseña visualmente gradientes lineales, radiales y cónicos, luego copia el código CSS. Todo en tu navegador.
¿Cómo usar Generador de degradado?
Selecciona el tipo de gradiente.
Añade paradas de color y establece colores.
Copia el código CSS generado.
Preguntas frecuentes sobre Generador de degradado
¿Qué tipos de gradiente se admiten?
Lineales, radiales y cónicos.
¿Puedo copiar el código CSS directamente?
Sí, copia con un clic el código CSS para aplicarlo directamente.
¿Por qué aparece una banda gris sucia en medio de mi degradado?
Cuando dos colores están enfrentados en la rueda, la mezcla atraviesa un punto en el que la saturación cae casi a cero, y eso se ve como una banda gris apagada. Las parejas azul-naranja y rojo-verde son las culpables habituales. Añadir un tercer color como parada intermedia desvía la mezcla alrededor del gris, y elegir dos tonos vecinos en la rueda evita el problema por completo.
¿Puedo guardar el degradado como archivo de imagen y no solo como CSS?
Sí, puedes descargar un PNG y usarlo tal cual como fondo de diapositiva, imagen para redes o pieza impresa. Para una página web, en cambio, el CSS es mejor: no hay archivo que descargar, el degradado se estira a cualquier tamaño de pantalla sin romperse y nunca muestra el escalonado propio de un mapa de bits ampliado.
¿Cómo aprovechar Generador de degradado al máximo?
Mezcla dos tonos cercanos en la rueda cromática; los opuestos generan un gris sucio en el centro.
Una diagonal de 135 grados es la opción más segura para banners y fondos de tarjeta.
Si va a llevar texto encima, comprueba el contraste con la parada más clara del degradado.