Crear degradados CSS visualmente
Los degradados añaden profundidad y color a botones, secciones hero, tarjetas y fondos sin necesidad de usar un solo archivo de imagen. Sin embargo, escribirlos a mano implica adivinar ángulos y porcentajes, y recargar la página una y otra vez. Este generador de degradados CSS te permite diseñar el degradado visualmente con una vista previa en vivo y te ofrece un código CSS limpio, listo para copiar y compatible con todos los navegadores modernos.
Características
- Tres tipos de degradado: lineal, radial (círculo o elipse) y cónico.
- Hasta ocho puntos de color con posiciones arrastrables.
- Control deslizante de ángulo para degradados lineales y cónicos.
- Ajustes preestablecidos y un botón aleatorio para inspirarte rápidamente.
- Color sólido de respaldo incluido en el CSS.
- Copiar el código con un solo clic.
Cómo usar el CSS
Pega el código en la regla del elemento al que quieras dar estilo:
.hero {
background: #0ea5e9;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}
Los degradados se comportan como imágenes en CSS, por lo que también puedes usarlos en background-image, superponer varios degradados separados por comas, o combinarlos con una foto: background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); oscurece una imagen para que el texto blanco superpuesto siga siendo legible.
Consejos de diseño
- Mantenlo sutil. Dos tonos adyacentes (de azul a morado, de naranja a rosa) se ven más suaves y modernos que los colores opuestos.
- Verifica el contraste. Si hay texto sobre el degradado, asegúrate de que sea legible en ambos extremos — prueba los colores con el Conversor de colores, que muestra los ratios de contraste.
- Extrae colores de una imagen de marca con el Selector de color de imagen.
- Añade profundidad a tarjetas y botones con el Generador de box shadow.