Generador de Gradientes CSS
Crea gradientes CSS lineales, radiales y cónicos con una vista previa en vivo y código listo para copiar.
Cargando Generador de Gradientes CSS… Si no ocurre nada, activa JavaScript.
Un gradiente CSS es una función que genera una transición suave entre dos o más colores, renderizada enteramente por el navegador sin ningún archivo de imagen. Hay tres tipos: `linear-gradient()` hace la transición de colores a lo largo de un eje recto en cualquier ángulo; `radial-gradient()` irradia hacia afuera desde un punto central en un círculo o una elipse; y `conic-gradient()` barre los colores alrededor de un punto central como la esfera de un reloj. Los tres son independientes de la resolución, se renderizan nítidos a cualquier densidad de pantalla, desde las pantallas HD estándar hasta las pantallas Retina de alta densidad, y como se calculan en la GPU, apenas tienen coste de rendimiento en comparación con los fondos de imagen.
Preguntas frecuentes
¿Se envía algo a un servidor cuando creo un gradiente?
¿Cuál es la diferencia entre los gradientes lineales, radiales y cónicos?
¿Funcionan los gradientes CSS en todos los navegadores?
¿Cómo creo un gradiente con un borde marcado en lugar de una mezcla suave?
¿Puedo usar gradientes como borde o relleno de texto?
¿Qué es una parada de color y cuántas puedo añadir?
¿Cómo controlo el punto medio entre dos paradas de color?
¿Puedo superponer varios gradientes uno sobre otro?
¿Cuál era la forma antigua de hacer gradientes antes de CSS3?
¿Cómo hago un gradiente que funcione como indicador de carga?
Acerca de Generador de Gradientes CSS
Los gradientes CSS se usan por todas partes en el diseño web moderno. Los gradientes lineales sutiles añaden profundidad a las secciones principales, los estados de botón y los fondos de tarjetas sin la sobrecarga de los recursos de imagen. Los gradientes radiales crean efectos de foco, viñetas y un brillo ambiental alrededor de los elementos centrales. Los gradientes cónicos sustentan gráficos circulares, indicadores de carga y ruedas de color construidos puramente en CSS. Más allá de la estética, los gradientes en CSS se versionan en el código fuente junto al marcado que estilizan, lo que los hace más fáciles de mantener, actualizar y traspasar que los archivos de imagen generados en software de diseño.
Esta herramienta ofrece un editor visual en vivo para los tres tipos de gradiente. Añades, eliminas y reposicionas paradas de color en una pista interactiva, ajustas el ángulo o la forma, y la salida CSS se actualiza en tiempo real. El fragmento generado es CSS3 estándar y sin prefijos de proveedor que funciona en todos los navegadores modernos. Se ejecuta enteramente del lado del cliente, sin subidas, sin cuentas, sin seguimiento. Los cambios existen solo en tu sesión de navegador y el CSS final que copias al portapapeles.
Una consideración importante es la accesibilidad: los gradientes son fondos decorativos y no llevan alternativas de texto, pero afectan a la relación de contraste de cualquier texto que se renderice encima de ellos. Un gradiente que empieza claro y termina oscuro puede hacer que el texto sea legible en un lado del elemento e ilegible en el otro. Comprueba siempre tus fondos de gradiente frente al texto de primer plano usando un verificador de contraste. Una técnica práctica es añadir una superposición oscura semitransparente mediante una capa CSS adicional, `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))`, para garantizar un contraste mínimo constante en toda el área del gradiente.
De las chillonas barras arcoíris de los 90 al CSS acelerado por GPU: la cronología del gradiente web
Los diseñadores web obtuvieron los primeros gradientes a finales de los años 90 mediante recortes de imágenes GIF y PNG, un mosaico de imagen de un píxel de ancho estirado horizontalmente, o un fondo de imagen de ancho completo. La técnica era tan común que dio forma a toda una estética: la barra de navegación con gradiente azul oscuro a negro se volvió sinónimo del diseño web corporativo de principios de los 2000. Crear o ajustar estos gradientes requería Photoshop, una nueva exportación y un despliegue en el servidor, un flujo de trabajo que podía llevar horas para un cambio de color que quizá fuera rechazado en la revisión.
La sintaxis de gradiente CSS con prefijos de proveedor empezó a aparecer alrededor de 2008: `-webkit-gradient()` en Safari, con su propia sintaxis peculiar que apenas se parecía a lo que se convertiría en el estándar. Firefox introdujo `-moz-linear-gradient()` con una sintaxis diferente. Internet Explorer no ofreció ningún soporte de gradiente hasta IE10, lo que llevó a los desarrolladores a usar en su lugar la sintaxis propietaria `filter: progid:DXImageTransform.Microsoft.gradient()`. Durante varios años, lograr gradientes coherentes entre navegadores requería escribir cuatro declaraciones separadas para el mismo efecto, una pesadilla de mantenimiento que hizo enormemente populares los preprocesadores CSS y las herramientas de generación de gradientes.
El W3C estandarizó los gradientes CSS en la especificación CSS Images Level 3, y los gradientes lineales y radiales ganaron soporte universal sin prefijos hacia 2013. Los gradientes cónicos, propuestos por Lea Verou en una entrada de blog en 2015, se implementaron en los navegadores entre 2018 y 2020 después de que ella publicara un polyfill que demostraba los casos de uso. La progresión de los chapuceros mosaicos de imagen a las primitivas CSS nativas renderizadas por GPU sigue la historia más amplia de la maduración de la plataforma web, de un sistema de documentos a un entorno de ejecución de aplicaciones completo.