CSS Gradient Generator

Diseña gradientes CSS lineales y radiales visualmente, ajusta colores y ángulo, y copia el CSS.

Cómo usar

  1. Elige el tipo de gradiente — lineal o radial — y selecciona tus colores.
  2. Ajusta el ángulo con el deslizador (solo lineal) y ve la vista previa actualizarse en tiempo real.
  3. Copia el CSS con un clic y pégalo en tu hoja de estilos.

Sobre esta herramienta

Los gradientes CSS son los patrones de fondo de la web moderna. Un gradiente lineal mezcla colores a lo largo de una línea en un ángulo elegido; un gradiente radial los mezcla desde un punto central hacia afuera. Ambos se declaran en una sola propiedad CSS, se renderizan a cualquier resolución sin un archivo de imagen y no cuestan nada en peso de red. Este generador construye la declaración visualmente.

Elige dos o tres colores, establece el ángulo para lineal o déjalo para radial, y la vista previa muestra el resultado. La línea CSS debajo está lista para copiar — pégala como propiedad background y funciona en cualquier navegador lanzado en la última década. Tres colores producen gradientes más ricos que dos, y el color del medio es el que hace o deshace el diseño.

La herramienta se ejecuta en tu navegador. No hay llamada al servidor, no se genera una imagen, no hay archivo para descargar. Lo que ves en la vista previa es lo que el navegador renderiza del CSS, lo que significa que el resultado en producción será idéntico.

Preguntas frecuentes

Does it work in all browsers?

Sí. Los gradientes CSS son soportados en todos los navegadores modernos. El código generado usa la sintaxis estándar sin prefijos de fabricante.

¿Puedo agregar más de tres colores?

La herramienta ofrece tres paradas de color. Para gradientes más complejos, comienza con el código de tres paradas y agrega paradas manualmente en tu CSS.

What is the angle?

La dirección del gradiente en grados. 0 va hacia arriba, 90 va a la derecha, 180 va hacia abajo. El deslizador cubre de 0 a 360.

¿Puedo usarlo para degradados de texto?

Sí. Aplica el gradiente como background-image, establece background-clip: text y color: transparent. El CSS que esta herramienta genera es la parte del background-image.

Is the gradient an image?

No. Es una declaración CSS. El navegador la renderiza matemáticamente, así que es nítida a cualquier tamaño y no agrega peso a la página.

Herramientas relacionadas

¿Enlaces largos? Acórtalos gratis

Vai.la convierte cualquier URL en un enlace corto con estadísticas de clics, código QR y tu propio biolink.

Vai.la no se hace responsable del uso de las herramientas ni de las decisiones tomadas a partir de sus resultados.