Saltar al contenido

Generador de gradientes CSS

Ordena de dos a cuatro colores, comprueba la vista previa y copia el mismo fondo CSS.

Configura el gradiente

Procesado en tu navegador.

Entero de 2 a 4.

0–360 grados; solo lineal.

0–100%; solo radial.

0–100%; solo radial.

HEX opaco de 3 o 6 dígitos.

0 transparente; 1 opaco.

0–100%; orden ascendente.

HEX opaco de 3 o 6 dígitos.

0 transparente; 1 opaco.

0–100%; orden ascendente.

HEX opaco de 3 o 6 dígitos.

0 transparente; 1 opaco.

0–100%; orden ascendente.

HEX opaco de 3 o 6 dígitos.

0 transparente; 1 opaco.

0–100%; orden ascendente.

Gradiente generado

Configura los valores y genera el CSS.

Cómo generar un gradiente CSS

Crea una imagen de fondo sin repetición con valores explícitos.

  1. Elige lineal o radial.
  2. Elige de dos a cuatro puntos.
  3. Introduce color, opacidad y posición.
  4. Ajusta ángulo o centro.
  5. Genera, compara y copia.

Sintaxis

linear-gradient usa un ángulo; radial-gradient(circle at X% Y%) parte de un centro.

Puntos de color

Las posiciones deben ascender. Dos posiciones iguales crean un corte nítido.

Confirmación

Editar invalida CSS, copia y vista previa hasta volver a generar.

Alcance

  • Sin arrastre, paletas, animación ni prefijos.
  • Comprueba aparte el contraste del texto.

Ejemplos

linear-gradient(90deg, #FF0000 0%, #0000FF 100%).

radial-gradient(circle at 25% 75%, #FFFFFF 0%, #000000 100%).

Preguntas frecuentes

¿Se permite la misma posición?

Sí, para un cambio brusco.

¿Hay degradados repetidos?

No, esta página no los genera.