EspañolES

Generador de degradados CSS

Define tus paradas de color y el ángulo, y el CSS del degradado queda listo para copiar.

Tus textos y archivos no salen de tu navegador: no se envía nada a ningún servidor.

Paradas de color

Haz clic en un espacio vacío de la barra para añadir una parada, o arrastra un control para moverla.

Código CSS

La línea background-color es un color medio para los entornos que no pueden dibujar degradados.

Cómo se usa

  1. Elige un tipo —lineal, radial o cónico— y ajusta el ángulo o la posición del centro.
  2. Añade paradas haciendo clic en la barra o con “Añadir parada”. Arrastra un control o escribe un porcentaje para mover una parada.
  3. Elige el color de cada parada con el selector, o escribe un código como #rrggbbaa para incluir transparencia.
  4. Copia el código CSS y pégalo en tu hoja de estilos. Presiona “Aleatorio” para descubrir nuevas combinaciones.

Preguntas frecuentes

¿Qué diferencia hay entre lineal, radial y cónico?

El lineal mezcla los colores a lo largo de una línea recta, el radial los extiende hacia fuera desde un punto central y el cónico los hace girar en el sentido de las agujas del reloj alrededor del centro. El cónico va muy bien para gráficos circulares y ruedas de color.

¿Hacia dónde apunta 0deg?

En linear-gradient, 0deg va de abajo hacia arriba y 90deg de izquierda a derecha. Un degradado cónico empieza en 0deg, en la posición de las 12 en punto.

¿Los degradados funcionan en navegadores antiguos?

Los degradados lineales y radiales funcionan en prácticamente todos los navegadores, y los cónicos en los navegadores de 2020 en adelante. Donde no se puede dibujar el degradado, se muestra el background-color de respaldo.

Herramientas relacionadas

Selector de colorHEX, RGB, HSL y CMYK en un solo lugarFiltros CSSDesenfoque, brillo, escala de grises y másPaleta para Tailwind CSSDe un color a una escala de 50 a 950Arte ASCIITexto y fotos hechos con caracteres

Todas las herramientas