Cómo crear un gradiente CSS (lineal, radial, cónico)
Aprende a diseñar y codificar hermosos gradientes CSS. Incluye un generador visual gratuito.
¿Por qué usar gradientes CSS?
Los gradientes CSS te permiten crear transiciones de color suaves sin archivos de imagen. Son perfectos para fondos, botones, tarjetas y secciones hero. Como los gradientes se generan en el navegador a partir de código, escalan perfectamente a cualquier resolución, no añaden peso de descarga y se pueden ajustar al instante. Los dos tipos principales son gradientes lineales (flujo recto de color) y gradientes radiales (flujo circular), a los que se han sumado los gradientes cónicos (que barren alrededor de un centro).
Un gradiente bien elegido puede elevar un diseño plano, fijar un ambiente o guiar la vista hacia una llamada a la acción. La clave es partir de un par de colores con fuerza y elegir bien la dirección y las paradas.
Casos de uso comunes
- Secciones hero: fondos llamativos para landing pages
- Botones: gradientes sutiles hacen los CTA más clickables
- Tarjetas y paneles: profundidad de fondo sin imágenes
- Estados de carga: efectos de brillo suave para placeholders
- Bordes y texto: las versiones más nuevas de CSS permiten aplicar gradientes a bordes y contornos de texto
Método 1: Usa el generador de gradientes CSS gratuito de UtilBoxx (Recomendado)
Nuestro generador de gradientes CSS te permite elegir colores, ajustar paradas, dirección y copiar CSS listo para producción. Así se usa:
- Ve a utilboxx.com/es/tools/color/gradient
- Elige dos o más colores con los selectores
- Ajusta paradas, ángulo y forma (lineal, radial, cónico)
- Previsualiza el resultado en vivo en el lienzo
- Pulsa "Copiar CSS" para obtener el fragmento
Por qué funciona este método:
- Vista previa en vivo sin recargar
- Exporta CSS limpio y con prefijos de proveedor
- Soporta gradientes lineales, radiales y cónicos
- Permite guardar y compartir gradientes por URL
- Funciona en móvil con controles táctiles
Método 2: Escribe el CSS a mano
Un gradiente lineal en CSS se ve así:
```css background: linear-gradient(135deg, #ff7e5f, #feb47b); ```
Para un gradiente radial:
```css background: radial-gradient(circle at center, #6a11cb, #2575fc); ```
Para un gradiente cónico (ideal para efectos de gráfico circular):
```css background: conic-gradient(from 180deg, red, yellow, lime, cyan, blue, magenta, red); ```
Puedes usar cualquier número de paradas y porcentajes para controlar la mezcla.
Método 3: Usa una biblioteca de gradientes prefabricada
Sitios como uiGradients, Grabient y ColorHub ofrecen colecciones cuidadas de gradientes. Puedes navegar, copiar el CSS y pegarlo en tu proyecto. Es la opción más rápida cuando no necesitas un diseño a medida.
Preguntas frecuentes
¿Cuál es la diferencia entre gradiente lineal, radial y cónico?
El lineal fluye en línea recta; el radial irradia desde un punto central; el cónico barre los colores alrededor de un centro, como una rueda de color. Cada uno crea un efecto visual diferente.
¿Afectan los gradientes CSS al rendimiento?
No. Los gradientes los calcula el compositor del navegador y son esencialmente gratis en tiempo de ejecución. Tienen menor peso que las imágenes de fondo y escalan a cualquier resolución.
¿Puedo usar gradientes en bordes y texto?
Sí. Con `border-image: linear-gradient(...)` para bordes, y `background-clip: text; color: transparent;` para rellenar texto, puedes aplicar gradientes casi en cualquier parte.
¿Cómo hago un gradiente accesible?
Asegura un contraste adecuado con el texto encima. Usa un verificador de contraste y considera ofrecer un color sólido de respaldo para usuarios con movimiento reducido o alto contraste.
Conclusión
Los gradientes CSS son una herramienta de diseño potente y ligera. Para un flujo de trabajo rápido y visual, el generador de gradientes CSS de UtilBoxx es la forma más fácil de diseñar y copiar código listo para producción.