Handytool
DesarrolladorGratisSe ejecuta localmente

Generador de gradiente CSS

Construye gradientes CSS lineales, radiales y cónicos — arrastra paradas, elige colores, copia el CSS.

Vista previa
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Tipo
Preestablecidos

Añade hasta seis paradas de color, arrastra el control deslizante de posición y copia el CSS.

Acerca de Generador de gradiente CSS

El generador de gradiente CSS de Handytool construye gradientes lineales, radiales y cónicos con hasta seis paradas de color. Arrastra la posición de una parada, cambia su color, cambia el tipo de gradiente y la vista previa en vivo y la declaración CSS se actualizan instantáneamente. Comienza desde uno de los preestablecidos incorporados — Lime Swiss, Sunset, Sky, Aurora — o diseña el tuyo desde cero.

Funciones de Generador de gradiente CSS

  • 01

    Lineal, radial y cónico

    El lineal es el gradiente de fondo cotidiano; el radial es excelente para reflejos y viñetas; el cónico es perfecto para gráficos circulares, ruedas de color y fondos rotatorios.

  • 02

    Hasta seis paradas de color

    Agrega y quita paradas, establece la posición de cada una con un control deslizante y elige su color a través del selector de color del sistema o un valor hex. Las paradas se re-ordenan por posición automáticamente.

  • 03

    Declaración CSS copeable

    La salida es una declaración background: ... completa que puedes pegar directamente en una hoja de estilos, un componente con estilo o una clase de valor arbitrario de Tailwind.

Preguntas frecuentes sobre Generador de gradiente CSS

¿Cuál es la diferencia entre lineal, radial y cónico?
Los gradientes lineales corren en línea recta en un ángulo dado; los radiales se propagan desde un centro; los cónicos barren alrededor de un punto como la manecilla de un reloj. Cada uno se adapta a un efecto visual diferente.
¿Cuántas paradas de color debo usar?
Dos paradas es el gradiente clásico de dos colores. Tres o cuatro te permite crear transiciones realistas (puesta de sol, aurora). Más de seis tiende a verse ruidoso — por eso este generador tapa en seis.
¿Puedo usar esto para fondos en una plantilla de correo?
La mayoría de clientes de correo aún no soportan gradientes CSS modernos de manera confiable — proporciona un color de fallback sólido además del gradiente de fondo si copias esto en una plantilla de correo electrónico.
¿Es la vista previa precisa en píxeles?
Sí — la vista previa se renderiza por el motor de gradiente nativo del navegador, por lo que lo que ves es exactamente lo que tu CSS producirá.

Herramientas relacionadas

Desarrollador →

Explora otras herramientas

Todas las herramientas →