Browse categories

Generador de degradados CSS

Crea degradados CSS compatibles con el navegador directamente en tu navegador.

Live gradient preview
Customization

Color stops

Ready to use

CSS

90° linear
background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

Change a color to update the gradient.

Cómo usar esto generator

  1. Seleccione el modo lineal o radial, aplique un ajuste preestablecido o edite cada punto de color, y luego ajuste las posiciones y el ángulo según corresponda.
  2. Revisar el resultado en tiempo real y utilizar la opción "Copiar resultado" cuando necesite compartirlo.

Cómo generator works

Los controles de vista previa en vivo y de detención generan una declaración de fondo CSS estándar sin prefijo que se puede copiar o descargar.

Paso a paso generation

  1. Seleccione el modo lineal o radial, aplique un ajuste preestablecido o edite cada punto de color, y luego ajuste las posiciones y el ángulo según corresponda.
  2. Los controles de vista previa en vivo y de detención generan una declaración de fondo CSS estándar sin prefijo que se puede copiar o descargar.
  3. Verifique el resultado mostrado y, si es necesario, cópielo.

Ejemplo resuelto

Un degradado lineal de 135 grados puede combinar varios puntos de color, como azul al 0%, verde al 50% y amarillo al 100%.

Guía de riesgos

Preguntas frecuentes

¿Esta herramienta envía mis datos a algún lugar?

No. El cálculo interactivo se ejecuta en su navegador y este sitio no envía datos de la herramienta a un servidor.

¿Cómo debo usar el resultado?

Verifique que las unidades y los valores introducidos coincidan con su situación, especialmente en lo que respecta a fechas, intervalos y redondeo.

Herramientas relacionadas