Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual y vista previa en vivo.
Haz clic para agregar un punto de color
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); background-image: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
background-image: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); background-image: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
Sin gradientes guardados
Acerca del Generador de Degradados CSS
Los degradados CSS crean transiciones suaves entre dos o más colores sin usar imágenes. Pueden ser lineales (a lo largo de una línea recta), radiales (emanando desde un punto central) o cónicos (barriendo alrededor de un centro). Este editor visual te permite crear degradados complejos con múltiples puntos de color y genera el código CSS al instante.
Cómo Usar
Elige un tipo de degradado (lineal, radial o cónico). Para degradados lineales, ajusta el ángulo o selecciona una dirección predefinida. Añade, elimina o modifica puntos de color; cada punto tiene un selector de color y un deslizador de posición. La vista previa se actualiza al instante. Copia el código CSS generado con un clic.
Casos de Uso Comunes
- Crear fondos de degradado para secciones hero y banners
- Diseñar superposiciones de degradado para imágenes y tarjetas
- Construir fondos coloridos para botones y elementos de interfaz
- Generar bordes de degradado y efectos de texto con CSS
- Prototipar esquemas de color para aplicaciones web y móviles