Generador de Gradientes CSS

¿Qué es esta herramienta?

Los degradados CSS son imágenes generadas por el navegador a partir de una lista de colores, en lugar de archivos que subes — linear-gradient() transiciona colores a lo largo de una línea recta en un ángulo determinado, mientras que radial-gradient() transiciona colores hacia afuera desde un punto central. Ambos aceptan dos o más puntos de color, cada uno anclado opcionalmente a una posición dentro del degradado.

Escritos a mano, los degradados son fáciles de estropear sutilmente: el orden de los puntos, porcentajes ausentes o un valor de ángulo en la dirección equivocada (los ángulos CSS avanzan en sentido horario desde 'to top', a diferencia de los ángulos matemáticos). Esta herramienta mantiene la sintaxis fuera de tu camino — ajusta colores y posiciones con selectores y controles deslizantes, observa la vista previa actualizarse en tiempo real y copia el CSS resultante cuando se vea bien.

Fuente: CSS Images Module Level 3, W3C — la especificación que define la sintaxis de linear-gradient() y radial-gradient().

¿Por qué utilizarlo?

• La vista previa en vivo se actualiza al instante con cada cambio de color, posición y ángulo — no hace falta recargar la página para ver el resultado.
• Cambia entre degradado lineal y radial con un clic; el control de ángulo se oculta automáticamente para los degradados radiales, donde no aplica.
• Añade o quita puntos de color (de 2 a 4) en lugar de estar limitado a un degradado fijo de dos colores.
• Cada punto tiene su propio control de posición, así que los puntos no tienen que estar distribuidos uniformemente.
• Genera CSS listo para pegar con la sintaxis estándar linear-gradient()/radial-gradient().
• Se ejecuta enteramente en tu navegador — nada de lo que configuras se sube a ningún sitio. Gratis, sin registro, funciona en móvil.

Cómo utilizarlo

1. Elige Lineal o Radial como tipo de degradado.
2. Para un degradado lineal, arrastra el control de ángulo — 90deg va de izquierda a derecha, 180deg va de arriba a abajo, y así sucesivamente.
3. Ajusta el color y la posición de cada punto; el primer punto es el color inicial del degradado, el último es su color final.
4. Haz clic en '+ Añadir punto' para añadir hasta 4 puntos en total y crear un degradado multicolor, o en el botón ✕ para eliminar uno (mínimo de 2).
5. Copia el CSS generado y pégalo en una declaración background o background-image.

Ejemplo

Entrada

Lineal · Ángulo: 90deg · Puntos: #f97316 en 0%, #ec4899 en 100%

Resultado

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

Un degradado de naranja a rosa de izquierda a derecha — un estilo habitual para botones, banners y fondos de sección hero.

Degradados lineales vs. radiales

Un degradado lineal transiciona el color a lo largo de una línea recta, controlado por un ángulo — útil para banners, botones y fondos direccionales. Un degradado radial transiciona el color hacia afuera desde un punto central en anillos expansivos, lo que resulta adecuado para efectos de foco, insignias o fondos con brillo. Esta herramienta configura el degradado radial por defecto como un círculo centrado en el cuadro, que cubre el caso de uso radial más común; CSS también admite formas de elipse y posiciones descentradas si necesitas editar más a mano el resultado.

Patrones habituales de degradado

• Acento de marca sutil: dos tonos cercanos (por ejemplo, dos matices del mismo color) en un ángulo poco pronunciado para un fondo suave.
• Botón CTA de alto contraste: dos colores saturados y complementarios a 90deg o 135deg para un aspecto llamativo y clicable.
• Superposición sobre una imagen: un degradado de transparente a un color sólido (ajusta la opacidad mediante un color rgba en el hexadecimal subyacente del selector, o ajústalo después de copiar) colocado sobre una background-image.
• Degradado arcoíris/de marca con varios puntos: 3–4 puntos distribuidos a lo largo de todo el rango de 0–100% para transiciones más suaves y graduales de lo que permite un degradado de dos colores.
• Foco radial: un punto central brillante cerca del 0% que se desvanece hacia un punto de borde más oscuro cerca del 100%, útil para secciones hero o resaltados de tarjetas.

Combínalo con otras herramientas CSS

Los degradados suelen combinarse con esquinas redondeadas y sombras en el mismo elemento — una tarjeta con degradado, una sombra suave y esquinas redondeadas es un patrón de interfaz habitual. Genera cada pieza por separado y combina las declaraciones CSS en el elemento.

→ Generador de Box Shadow · Generador de Border Radius · Selector de colores

Preguntas frecuentes