T

Text Machine

Potentes herramientas de texto, en tu navegador

Generador de Gradientes CSS

Diseña gradientes CSS lineales y radiales con vista previa en vivo. Añade paradas de color, ajusta el ángulo y copia un CSS de fondo limpio, todo en tu navegador.

Vista previa
Gradiente

Ángulo

90°

Paradas de color

#f5530c

%

#ffa94d

%

CSS

background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);

Cómo usar Generador de Gradientes CSS

  1. 1

    Elige un tipo de gradiente

    Alterna entre Lineal y Radial. El gradiente lineal además te permite definir la dirección con el control deslizante de ángulo, medido en grados.

  2. 2

    Añade y colorea tus paradas

    Haz clic en una muestra para elegir cada color y fija su posición del 0 al 100 por ciento. Usa Añadir parada de color para mezclas de varios colores, o elimina una parada para simplificar.

  3. 3

    Previsualiza en vivo

    El panel de vista previa muestra tu gradiente tal y como se verá en un navegador, y se actualiza con cada cambio que haces.

  4. 4

    Copia el CSS

    Copia la línea de fondo generada y pégala en tu hoja de estilos. Es CSS estándar que funciona en todos los navegadores modernos.

Preguntas frecuentes

¿Cómo creo un gradiente CSS?
Elige lineal o radial, ajusta el ángulo y añade tantas paradas de color como quieras. La vista previa se actualiza en vivo y el CSS listo para usar aparece debajo como una propiedad background que puedes copiar directamente en tu hoja de estilos.
¿Cuál es la diferencia entre un gradiente lineal y uno radial?
Un gradiente lineal mezcla los colores a lo largo de una línea recta y controlas su dirección con el ángulo en grados. Un gradiente radial los mezcla hacia fuera en un círculo desde el centro. Ambos usan las mismas paradas de color; solo cambia la forma de la mezcla.
¿Qué son las paradas de color?
Una parada de color es un color asociado a una posición del 0 al 100 por ciento a lo largo del gradiente. Dos paradas dan una mezcla sencilla de dos colores, mientras que añadir más te permite crear gradientes ricos de varios colores. Cambia el valor de posición para mover el punto donde se sitúa cada color.
¿Cómo uso el gradiente en mi proyecto?
Copia la línea generada y pégala como la propiedad background de cualquier elemento, como un div o una section. Al ser CSS puro, funciona en todos los navegadores modernos sin necesidad de imágenes ni librerías.
¿Se suben mis datos a un servidor?
No. Todo se ejecuta por completo en tu navegador. Nada de lo que creas se sube, registra ni almacena, así que tu trabajo permanece totalmente privado y la herramienta sigue funcionando incluso sin conexión.

Herramientas relacionadas

Sigue trabajando con estas prácticas herramientas

Conversor de HTML a Texto

Formateador de JSON

Probador de Regex

Decodificador de JWT

Generador de Sombras CSS

Convertidor de Texto a HTML