Generador de gradientes CSS
Crea degradados CSS con vista previa
Cómo usar Generador de gradientes CSS
Crea degradados CSS lineales y radiales con vista previa en vivo. Copia el código CSS. Generador de degradados gratuito.
¿Para qué se usan los degradados CSS?
Los degradados CSS crean transiciones suaves de color directamente en el navegador, sin cargar archivos de imagen. Son un pilar del diseño web moderno —permiten efectos visuales ricos sin peticiones HTTP adicionales.
- Fondos de secciones hero: Los fondos degradados a todo ancho en páginas de aterrizaje crean impacto visual sin imágenes. Un degradado lineal del color primario al secundario de la marca establece una identidad visual inmediata.
- Estilo de botones: Los fondos degradados en botones (llamadas a la acción, acciones primarias) añaden profundidad y peso visual.
background: linear-gradient(135deg, #7B35F5, #C040A0) - Texto degradado: Aplica degradados al texto usando
background-clip: texty-webkit-text-fill-color: transparent—crea encabezados visualmente llamativos. - Efectos de superposición: Una superposición degradada semitransparente sobre una imagen (de transparente a negro) mejora la legibilidad del texto sin bloquear la imagen.
- Barras de progreso y visualización de datos: Los rellenos degradados en barras de progreso y elementos de gráficos hacen los datos más atractivos visualmente.
Tipos de degradado: linear-gradient(dirección, color1, color2) para degradados direccionales. radial-gradient(forma, color1, color2) para degradados circulares/elípticos. conic-gradient(color1, color2) para degradados rotacionales tipo diagrama de sectores (CSS4).
Frequently Asked Questions
¿Cuál es la diferencia entre degradados lineales, radiales y cónicos?
Los degradados lineales hacen la transición de colores a lo largo de una línea recta (de arriba a abajo, de izquierda a derecha o cualquier ángulo). Los degradados radiales irradian desde un punto central hacia afuera en un círculo o elipse. Los degradados cónicos hacen la transición alrededor de un punto central —como la cara de una rueda de colores o un diagrama de sectores. Cada uno crea un efecto visual fundamentalmente diferente.
¿Cómo creo un degradado que se repita?
Usa repeating-linear-gradient() o repeating-radial-gradient(). Especifica el degradado con una longitud definida: repeating-linear-gradient(45deg, rojo 0px, rojo 10px, azul 10px, azul 20px) crea rayas diagonales. Sin un tamaño de patrón definido, los degradados repetitivos se comportan como degradados regulares.
¿Se pueden animar los degradados con CSS?
Los degradados en sí no pueden transitarse directamente con CSS transition —background-image no es animable. Soluciones alternativas: usa background-position con un background-size mayor, o usa propiedades personalizadas CSS (variables) para los colores y transiciona esas. El enfoque más común es hacer un fundido de opacidad entre dos capas de degradado.
¿Qué significa el ángulo del degradado?
El ángulo en linear-gradient se mide en el sentido de las agujas del reloj desde la parte superior. 0deg va hacia arriba (de abajo a arriba). 90deg va a la derecha (de izquierda a derecha). 180deg va hacia abajo (de arriba a abajo). 45deg va en diagonal hacia la derecha. También puedes usar palabras clave direccionales: to top, to bottom, to right, to bottom right, etc.
¿Cómo creo un degradado con múltiples puntos de color?
Añade más valores de color separados por comas: linear-gradient(135deg, #ff0000 0%, #ff8800 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). El porcentaje controla dónde aparece cada color. Sin porcentajes, los puntos se distribuyen uniformemente. Los puntos de color pueden solaparse para crear transiciones nítidas en lugar de suaves.
Degradados CSS vs degradados SVG vs degradados de imagen
Los degradados CSS no requieren archivos externos, escalan perfectamente y son fáciles de animar. Son la primera opción para fondos y efectos simples. Los degradados SVG pueden aplicarse a formas y trazados SVG —más flexibles para gráficos vectoriales complejos. Los degradados de imagen (PNG, JPG) son necesarios para efectos muy complejos que CSS no puede reproducir —degradados con textura, superposiciones de ruido o degradados con formas complejas. Para fondos web y elementos de UI, los degradados CSS son siempre preferibles a las imágenes por rendimiento.