Tipo de gradiente
Ángulo
135°Paradas de color
Preajustes
Generador de gradiente CSS
Cree hermosos degradados CSS lineales, radiales y cónicos con paradas de color ilimitadas. Copie el código CSS listo para usar para su próximo proyecto.
Degradados CSS: explicación lineal, radial y cónica
Los degradados CSS le permiten crear transiciones suaves entre dos o más colores sin utilizar ningún archivo de imagen. Están definidos completamente en CSS, lo que los hace infinitamente escalables (independientes de la resolución), livianos y fáciles de animar. Todos los navegadores modernos admiten gradientes CSS de forma nativa. Antes de la introducción de los degradados CSS, los diseñadores tenían que cargar imágenes de degradados muy cortadas para lograr profundidad visual, lo que ralentizaba los tiempos de carga del sitio web. Hoy en día, los degradados CSS aprovechan la aceleración del hardware del navegador para representar colores suaves de forma dinámica.
Un degradado lineal cambia los colores en una línea recta en un ángulo definido. linear-gradient(135deg, #667eea, #764ba2) crea un degradado púrpura diagonal. El ángulo va de 0° (de abajo hacia arriba) a 90° (de izquierda a derecha) a 180° (de arriba a abajo).
Un gradiente radial irradia desde un punto central hacia afuera. Por defecto crea una forma elíptica, pero se puede hacer circular. Ideal para efectos de foco, morfismo de vidrio y fondos brillantes.
Un degradado cónico (CSS4) barre los colores alrededor de un punto central como un gráfico circular. Esto permite gráficos circulares, ruedas de color y patrones de fondo abstractos retro en CSS puro.
Posicionamiento de parada de color
Cada parada de color tiene una posición (0%–100%) que define dónde aparece ese color en el degradado. No es necesario que las paradas estén espaciadas uniformemente. Al apilar dos paradas en la misma posición, puede crear una ruptura de color marcada (sin desvanecimiento). Al ajustar las posiciones, controlas qué parte del degradado ocupa cada color.
Estilos de degradado avanzados y fondos repetidos
Para requisitos de diseño más complejos, los desarrolladores utilizan las funciones repeating-linear-gradient() y repeating-radial-gradient(). Estas funciones muestran patrones de color en mosaico infinitamente en un contenedor. Esto es particularmente útil para crear diseños de rayas, tableros de ajedrez o papel rayado usando CSS puro, lo que reduce las solicitudes de red y mantiene las hojas de estilo extremadamente livianas.
Soporte y respaldo del navegador
Si bien los navegadores modernos son totalmente compatibles con la sintaxis de gradiente lineal, radial y cónica estándar, las versiones anteriores de los navegadores a veces requieren prefijos de proveedor como -webkit-. Al escribir CSS profesional, es una práctica estándar declarar primero un color de respaldo de fondo plano, seguido de la propiedad de degradado, así:
.elemento {color de fondo: #667eea; /* Respaldo */ imagen de fondo: gradiente lineal (135 grados, #667eea, #764ba2); }
Este paradigma de diseño garantiza que si un dispositivo heredado no puede compilar la sintaxis de gradiente, el diseño sigue siendo legible y visualmente completo.
Diseñar para la accesibilidad
Debido a que los degradados pueden introducir cambios de luminosidad altamente dinámicos detrás del texto, debe asegurarse de que todo el texto superpuesto siga siendo legible. Si la relación de contraste cae por debajo de 4,5:1, los usuarios con fatiga o discapacidad visual tendrán dificultades para analizar el contenido. Utilice escudos de superposición de texto de color oscuro o sólido, o agregue una capa oscura semitransparente (por ejemplo, rgba(0, 0, 0, 0.4)) sobre los degradados para mantener el contraste uniforme y cumplir con los requisitos WCAG.
El papel de los recursos de diseño y las conversiones de color en el desarrollo web
Crear interfaces de usuario e identidades de marca coherentes requiere que los diseñadores gestionen diversos formatos de activos y espacios de color. Formatos como RGB, HEX y HSL representan datos de color de manera diferente y la conversión entre ellos es una tarea estándar al crear hojas de estilo CSS o recursos de marca. HSL es fácil de diseñar porque le permite ajustar la luminosidad o la saturación de forma independiente para crear estados de desplazamiento y sombras, mientras que HEX es compacto y fácil de pegar entre editores de diseño como Figma y plantillas de código.
Optimización del rendimiento visual y los formatos de activos
Garantizar tiempos de carga de páginas rápidos depende en gran medida de la optimización de archivos gráficos como JPEG, PNG y SVG. Las imágenes rasterizadas (PNG/JPG) almacenan datos de color en cuadrículas fijas, lo que puede generar borrosidad cuando se amplían en pantallas de alta resolución. La conversión de recursos ráster en rutas vectoriales (SVG) garantiza una escalabilidad infinita y tamaños de archivos más pequeños, ya que los SVG representan gráficos matemáticamente utilizando líneas de coordenadas. Además, comprimir archivos JPEG, generar marcadores de posición de estructura alámbrica personalizados y crear favicons son pasos esenciales para optimizar el rendimiento de la interfaz y el peso de la página.
Comprobadores de contraste y cumplimiento de accesibilidad
Los estándares de accesibilidad web (como el WCAG) requieren combinaciones de colores para cumplir con relaciones de contraste específicas, lo que garantiza que el texto sea legible para usuarios con baja visión o daltonismo. Los verificadores de contraste evalúan la luminancia relativa entre el texto y los colores de fondo, verificando el cumplimiento de las reglas AA y AAA. El uso de comprobaciones de accesibilidad del lado del cliente garantiza que sus sistemas de diseño sigan siendo utilizables para todos los visitantes, calculando las proporciones localmente sin transmitir detalles de los activos a servidores externos.
Conversiones gráficas seguras del lado del cliente
Los convertidores de archivos en línea estándar requieren que usted cargue sus recursos de diseño en bases de datos remotas, lo que puede exponer trabajos protegidos por derechos de autor, firmas o maquetas confidenciales. Convertir archivos SVG a PNG, trazar contornos rasterizados o comprimir imágenes directamente en la memoria del navegador mantiene sus activos creativos completamente privados. Ningún archivo sale de su CPU, lo que garantiza una seguridad absoluta, velocidades de procesamiento más rápidas y un flujo de trabajo local fluido.
Preguntas Frecuentes
¿Qué tipos de degradados CSS existen?
CSS admite tres tipos principales de gradiente: gradiente lineal() (los colores fluyen en línea recta en un ángulo específico), gradiente radial() (los colores se irradian hacia afuera desde un punto central) y gradiente cónico() (los colores giran alrededor de un punto central como un gráfico circular). Cada tipo admite múltiples paradas de color.
¿Cómo creo un fondo degradado CSS?
Utilice la propiedad CSS de fondo o imagen de fondo con una función de degradado. Ejemplo: fondo: gradiente lineal (135 grados, #ff6b6b 0%, #4ecdc4 100%). Puede especificar el ángulo en grados, varios colores y la posición de cada color como porcentaje.
¿Qué es una parada de color en un degradado CSS?
Una parada de color define un color específico en una posición específica dentro de un degradado. Por ejemplo, en gradiente lineal (a la derecha, rojo 0%, azul 50%, verde 100%), el rojo comienza en 0%, el azul está en 50% y el verde está en 100%. Puedes agregar tantas paradas como necesites.
¿Cuál es la diferencia entre gradientes lineales y radiales?
Un degradado lineal cambia los colores a lo largo de una línea recta (en un ángulo que usted establezca). Un degradado radial comienza desde un punto central y se irradia hacia afuera en forma elíptica o circular. Utilice degradados lineales para fondos y secciones de héroes; utilice degradados radiales para efectos de foco y círculos brillantes.