Generador de Degradados CSS

Crea degradados CSS lineales, radiales y cónicos visualmente. Añade múltiples puntos de color y copia el CSS.

Estudio · entorno neutro

Paradas de color — arrastra los tiradores, haz clic en la pista para añadir

Tipo

Ángulo 90°

Paradas

CSS

Características

Lineal, radial y cónico

Varias paradas de color

Control del ángulo y la dirección

Vista previa en directo y código CSS

Cómo Usar

1. Elige el tipo de degradado y el ángulo; la superficie lo previsualiza a tamaño completo.

2. Arrastra los tiradores para mover paradas, haz clic en un hueco de la pista para añadir una (hasta seis) o afina con los pocillos de color y los campos de porcentaje.

3. Copia el CSS generado — compruébalo sobre el damero para detectar bandas sobre transparencias.

Sobre esta herramienta

Los degradados CSS pintan transiciones de color suaves sin archivos de imagen, así que se ven nítidos a cualquier tamaño y no cuestan nada de descargar. Este generador crea los tres tipos nativos: linear-gradient a lo largo de un ángulo, radial-gradient que se expande desde el centro y conic-gradient que gira alrededor de un punto como un círculo cromático. Arrastra los tiradores de la pista para mover las paradas de color, haz clic en la pista para añadir una parada (hasta seis) y afina colores y posiciones con los campos. El escenario previsualiza el resultado a tamaño completo y una superficie de cuadros revela bandas o transparencias inesperadas. El resultado es CSS estándar que funciona en todos los navegadores actuales, listo para pegar en una declaración background o background-image.

Preguntas Frecuentes

¿Qué diferencia hay entre los degradados lineales, radiales y cónicos?

Un degradado lineal cambia de color a lo largo de una línea recta con el ángulo que elijas. Uno radial se expande desde un punto central en círculo o elipse. Uno cónico gira los colores alrededor de un punto central, algo útil para gráficos de sectores y círculos cromáticos.

¿Cómo funcionan los ángulos del degradado?

0deg apunta hacia arriba, 90deg a la derecha, 180deg hacia abajo y 270deg a la izquierda. Así, linear-gradient(90deg, red, blue) empieza en rojo a la izquierda y termina en azul a la derecha.

¿Por qué mi degradado muestra bandas visibles?

Las bandas aparecen cuando dos colores parecidos se extienden sobre un área grande, sobre todo en pantallas de 8 bits. Ayuda añadir una parada intermedia, elegir colores con más contraste o añadir una textura de ruido sutil.

¿Un degradado puede incluir transparencia?

Sí. Usa colores con canal alfa, como rgba o HEX de 8 dígitos. Ten en cuenta que desvanecer hacia la palabra clave transparent puede producir un tono grisáceo en el centro en algunos casos; desvanecer hacia el mismo color con alfa cero queda más limpio.

¿Puedo usar un degradado como color de texto o borde?

Sí, con CSS adicional. Para texto, pon el degradado como fondo y usa background-clip: text con un color de texto transparente. Para bordes, lo habitual es border-image o un fondo en un elemento envolvente.