Generador de degradados CSS
Diseña un degradado CSS lineal, radial o cónico con 2 a 8 paradas de color, previsualízalo y copia el CSS listo para pegar.
- Funciona en tu navegador
- Sin subir archivos
- El resultado se queda en tu dispositivo
Privacidad y límitesSe ejecuta en tu navegador. No se sube nada.
El contenido de las entradas queda en esta pestaña; Refentra no lo sube ni guarda. Los recuentos agregados opcionales de acciones solo se envían con tu consentimiento de medición de uso. Borra el espacio al terminar.
Perfil compatible: 2–8 colores HEX sRGB opacos, ascendentes 0–100%; lineal/radial/cónico, vista previa y CSS.
Máximo 200.000 unidades UTF-16; los parsers pueden admitir menos. Worker: 15 segundos (regex 1,5 segundos).
Revisa la entrada y el resultado
- Prepara la entrada y elige la operación
Elige un degradado lineal, radial o cónico; indica las paradas de color en orden y un ángulo adecuado para ese tipo.
- Comprueba un ejemplo concreto
Prueba esta muestra y compara el resultado indicado: linear, angle=90, colors="#000000,#ffffff", positions="0,100" → linear-gradient(90deg, #000000 0%, #ffffff 100%)
- Revisa el resultado antes de reutilizarlo
Copia el valor CSS generado en la declaración de fondo que quieras; revisa el degradado con el tamaño real del elemento.
Respuestas sobre esta tarea
¿Un degradado mantiene el contraste del texto en todas partes?
No. El contraste cambia por la superficie; comprueba el fondo más débil detrás de cada zona de texto, no solo los extremos.
¿Qué compruebo si falla la entrada?
Usa de 2 a 8 colores hexadecimales opacos con posiciones de parada ascendentes de 0 a 100; reordena las paradas en lugar de confiar en una corrección implícita del navegador.
¿Hasta dónde llega esta herramienta?
Esto genera un valor de fondo CSS, no una imagen exportada, ni un degradado animado, ni una garantía de que se vea igual en todas las pantallas.