Generador de Degradados CSS
Un generador de degradados CSS ayuda a diseñadores y desarrolladores a crear hermosos degradados lineales y radiales visualmente. En lugar de escribir la sintaxis del degradado manualmente, puedes agregar paradas de color, ajustar ángulos y ver los cambios en tiempo real — luego copiar el código CSS listo para usar.
Esta herramienta soporta degradados lineales con ángulos personalizados y degradados radiales con formas de círculo o elipse. Agrega tantas paradas de color como necesites, posiciónalas con precisión y previsualiza el resultado al instante. Copia el CSS generado con un clic para usarlo en tus hojas de estilo.
Como funciona
Los degradados lineales se definen por un ángulo y una serie de paradas de color: linear-gradient(ángulo, color1 pos1%, color2 pos2%, ...). Los degradados radiales irradian desde un punto central: radial-gradient(forma, color1 pos1%, color2 pos2%, ...). El navegador interpola los colores entre las paradas para crear transiciones suaves.
Casos de uso
- Diseñar fondos degradados para sitios web y páginas de aterrizaje
- Crear efectos hover en botones y fondos de elementos de UI
- Generar superposiciones de degradado para secciones hero y banners
- Experimentar con combinaciones de colores para branding y sistemas de diseño
Preguntas frecuentes
¿Cómo crear un degradado en CSS?
Usa la función linear-gradient() o radial-gradient() como valor de background-image, por ejemplo background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%). Cada parada de color combina un color con una posición porcentual opcional, y el navegador interpola suavemente entre las paradas. Este generador construye esa sintaxis visualmente para que copies el CSS listo con un clic.
¿Cuál es la diferencia entre un degradado lineal y uno radial?
Un degradado lineal hace la transición de colores a lo largo de una línea recta definida por un ángulo, como linear-gradient(45deg, ...). Un degradado radial irradia desde un punto central usando una forma de círculo o elipse, como radial-gradient(circle, ...). Los lineales funcionan bien en fondos y botones, mientras que los radiales son ideales para efectos de foco y viñeta.
¿Cómo funcionan los ángulos en los degradados CSS?
En linear-gradient(), 0deg apunta el degradado hacia arriba, 90deg hacia la derecha, 180deg hacia abajo y 270deg hacia la izquierda, girando en sentido horario. Así, linear-gradient(90deg, red, blue) empieza rojo a la izquierda y termina azul a la derecha. Puedes usar cualquier valor de ángulo, incluidos decimales, para un control preciso.
¿Cuántas paradas de color puede tener un degradado CSS?
No hay un límite práctico — un degradado necesita al menos dos paradas de color, pero puedes agregar tantas como tu diseño requiera. Cada parada acepta una posición opcional de 0% a 100%; colocar dos paradas en la misma posición crea un borde duro en lugar de una mezcla suave. Esta herramienta te permite agregar, posicionar y eliminar paradas con vista previa en vivo.
¿Los degradados CSS afectan el rendimiento de la página?
Los degradados se renderizan de forma nativa en el navegador como background-image, por lo que evitan la petición HTTP extra y el peso de archivo de una imagen. Una regla de degradado es solo una línea de CSS, normalmente mucho más ligera que un PNG o JPEG equivalente. Para fondos estáticos, es uno de los efectos visuales más eficientes disponibles.