Generador de Degradados
Crea hermosos degradados CSS para tus diseños. Genera degradados lineales, radiales y cónicos con puntos de color personalizados y copia el código CSS al instante.
Color Stops
Código CSS
background: linear-gradient(90deg, #3B82F6 0%, #10B981 100%); Predeterminados
Tabla de contenidos
¿Qué es un degradado CSS?
Un degradado CSS es una transición suave entre dos o más colores. Los degradados son una poderosa herramienta de diseño que puede añadir profundidad, dimensión e interés visual a tus diseños web.
Los degradados CSS son ampliamente compatibles con todos los navegadores modernos y se pueden usar para fondos, bordes, efectos de texto y más.
Tipos de degradados explicados
Degradado lineal
Los degradados lineales transicionan colores a lo largo de una línea recta. Puedes controlar la dirección usando un ángulo o palabras clave direccionales.
Ejemplo: linear-gradient(90deg, #3B82F6, #10B981)
Degradado radial
Los degradados radiales transicionan colores desde un punto central hacia afuera en un patrón circular o elíptico. Son perfectos para efectos de foco.
Ejemplo: radial-gradient(circle at center, #3B82F6, #10B981)
Degradado cónico
Los degradados cónicos transicionan colores alrededor de un punto central, como una rueda de colores. Son excelentes para gráficos de sectores.
Ejemplo: conic-gradient(from 0deg at center, #3B82F6, #10B981)
Casos de uso
Los degradados CSS son versátiles y se pueden usar en muchos contextos de diseño:
- Fondos: Crea fondos llamativos para sitios web, secciones o componentes
- Botones: Añade profundidad e interés visual a botones y elementos de llamada a la acción
- Tarjetas: Mejora los diseños de tarjetas con fondos de degradado sutiles o audaces
- Efectos de texto: Aplica degradados al texto para una tipografía moderna y estilizada
- Bordes: Crea bordes degradados usando background-clip o border-image
- Superposiciones: Usa degradados como superposiciones en imágenes para mejorar la legibilidad del texto
- Visualización de datos: Crea gráficos y visualizaciones con colores degradados
- Identidad de marca: Incorpora degradados en la identidad visual de tu marca
Puntos de color
Los puntos de color definen dónde comienzan y terminan los colores en un degradado.
Posición
El valor de posición determina dónde aparece el color en el degradado. Los valores van del 0% (inicio) al 100% (fin).
Múltiples puntos
Puedes añadir múltiples puntos de color para crear degradados complejos y multicolor.
Formato de color
Los puntos de color aceptan cualquier valor de color CSS válido, incluidos códigos hex, valores RGB, valores HSL y colores con nombre.
Mejores prácticas
Mantenlo sutil
Aunque los degradados audaces pueden ser llamativos, los degradados sutiles suelen funcionar mejor en diseños profesionales.
Considera el contraste
Asegura suficiente contraste entre los colores del degradado y cualquier texto o contenido encima.
Usa colores apropiados
Elige colores que funcionen bien juntos. Los colores complementarios suelen crear los degradados más armoniosos.
Limita los puntos de color
2-4 puntos suelen crear los degradados más limpios y efectivos.
Prueba en diferentes pantallas
Los degradados pueden aparecer diferente en varias pantallas y dispositivos.
Consideraciones de rendimiento
Los degradados CSS son eficientes y no requieren archivos de imagen.
Preguntas frecuentes
Los degradados lineales transicionan colores a lo largo de una línea recta. Los radiales desde un punto central hacia afuera. Los cónicos alrededor de un punto central, como una rueda de colores.
Sí. Los degradados CSS son una tecnología web estándar y se pueden usar libremente en cualquier proyecto.
Usa background-clip: text junto con -webkit-background-clip: text y -webkit-text-fill-color: transparent.
Sí. Puedes animar degradados usando animaciones o transiciones CSS.
Los degradados lineales y radiales son compatibles con todos los navegadores modernos. Los cónicos tienen excelente compatibilidad en navegadores modernos.
Para la mayoría de los diseños, 2-4 puntos de color funcionan mejor.
Actualmente, los degradados no se guardan automáticamente. Puedes copiar el código CSS y guardarlo manualmente.