Toolzi LogoToolzi

Generador de Gradientes CSS

Genera código CSS de gradientes al instante con un editor visual.

0%
100%

Vista previa

Código CSS

background: linear-gradient(to bottom right, #6366f1 0%, #ec4899 100%);

¿Qué es un gradiente CSS?

Los gradientes CSS son transiciones de color renderizadas directamente en el navegador sin imágenes. Se usan en fondos, bordes y efectos de UI.

Tipos de Gradientes CSS

Gradiente Lineal

Transiciona colores a lo largo de una línea recta en un ángulo o dirección especificada. Se define con linear-gradient().

Gradiente Radial

Transiciona colores irradiando hacia afuera desde un punto central en forma circular o elíptica. Se define con radial-gradient().

Gradiente Cónico

Transiciona colores rotando alrededor de un punto central, como un gráfico de pastel. Se define con conic-gradient().

Cómo Usar el Generador

Selecciona un tipo de gradiente, ajusta la dirección o ángulo, agrega o elimina paradas de color, y copia el código CSS generado.

Consejos para Gradientes CSS

Usa rgba() o hex con alfa para gradientes transparentes. Superpón múltiples gradientes con fondos separados por comas.

Preguntas Frecuentes

¿Qué es un gradiente CSS?
Los gradientes CSS son transiciones de color creadas con funciones CSS como linear-gradient(), radial-gradient() o conic-gradient() sin archivos de imagen.
¿Cuál es la diferencia entre gradiente lineal y radial?
Los gradientes lineales transicionan a lo largo de una línea recta, mientras que los radiales se expanden desde un punto central en forma circular o elíptica.
¿Cómo agregar transparencia a un gradiente CSS?
Usa valores de color rgba() (ej. rgba(255,0,0,0.5)) o códigos hex de 8 dígitos (ej. #ff000080) en tus paradas de color.
¿conic-gradient funciona en todos los navegadores?
Los gradientes cónicos son compatibles con todos los navegadores modernos: Chrome 69+, Firefox 83+, Safari 12.1+.
¿Puedo apilar múltiples gradientes en un elemento?
Sí. CSS admite múltiples fondos separados por comas, permitiendo capas de varios gradientes en un solo elemento.
¿Cómo crear texto con gradiente en CSS?
Aplica el gradiente como fondo, luego usa -webkit-background-clip: text y color: transparent.
¿Qué es una parada de color en un gradiente CSS?
Una parada de color define un color específico en una posición porcentual específica a lo largo del gradiente.

Herramientas Relacionadas

CSS Gradient Text Generator →