Generador de gradientes CSS online gratis — copia el código al instante
Los gradientes CSS han evolucionado desde los fondos degradados básicos de los años 2010 hasta los elementos de diseño sofisticados de las interfaces modernas: fondos de hero sections, texto con gradiente, botones con efecto de profundidad y fondos de tarjetas con multiples colores. WikiPlus Generador de Gradientes CSS proporciona un editor visual para crear gradientes lineales y radiales, con previsualización en tiempo real y código CSS listo para copiar sin necesidad de recordar la sintaxis.
Gradientes lineales: la base del diseño moderno
Un gradiente lineal (linear-gradient) transiciona de un color a otro siguiendo una línea recta. La dirección puede especificarse en grados (0deg = de abajo hacia arriba, 90deg = de izquierda a derecha, 180deg = de arriba hacia abajo) o con palabras clave (to right, to bottom right, etc.). WikiPlus genera el código con la sintaxis moderna: background: linear-gradient(135deg, #color1, #color2). La dirección 135deg (diagonal de izquierda-arriba a derecha-abajo) es la más habitual en los diseños de 2024-2025. Los gradientes lineales son perfectos para fondos de secciones hero, headers, botones y cards.
Gradientes radiales: profundidad y luz
Un gradiente radial (radial-gradient) emana desde un punto central hacia el exterior, creando un efecto de luz o profundidad. La sintaxis básica es background: radial-gradient(circle, #color-center, #color-edge). El parámetro circle produce un gradiente circular uniforme; ellipse (el valor por defecto) produce uno elíptico que sigue la proporción del elemento. El punto de origen puede modificarse: radial-gradient(circle at top right, ...) inicia el gradiente desde la esquina superior derecha. WikiPlus genera el código del gradiente radial correctamente con la posición y forma que configures.
Gradientes con múltiples paradas de color
Los gradientes más interesantes visualmente usan tres o más paradas de color (color stops). En CSS, cada parada define el color y su posición en el gradiente: linear-gradient(90deg, #FF0000 0%, #FFFF00 50%, #00FF00 100%). WikiPlus permite añadir paradas de color haciendo clic en la barra del gradiente. La posición de cada parada se puede ajustar arrastrando o introduciendo un porcentaje exacto. Los gradientes con paradas en posiciones no uniformes crean transiciones más complejas: puedes hacer que un color ocupe el 80 % del espacio y el otro solo el 20 %.
Gradientes como propiedad de texto en CSS
Uno de los usos visuales más impactantes de los gradientes CSS es aplicarlos al texto, no al fondo. La técnica usa tres propiedades CSS combinadas: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;. El gradiente se aplica como fondo del elemento de texto pero el clip recorta el fondo visible a la forma de los caracteres, y el fill transparente hace que los caracteres muestren el gradiente en lugar de un color sólido. WikiPlus genera el gradiente base; el código CSS adicional del clip de texto debes añadirlo manualmente en tu hoja de estilos.
Preguntas frecuentes
- ¿El código CSS generado es compatible con todos los navegadores?
- Sí para los navegadores modernos (Chrome, Firefox, Safari, Edge de los últimos 4-5 años). La sintaxis moderna de gradientes CSS sin prefijos de navegador tiene soporte del 97 % a nivel global según Can I Use. Para soporte de IE11 (cuota de uso ya mínima), necesitarías añadir los prefijos -ms-. WikiPlus genera la sintaxis estándar sin prefijos, que es la apropiada para proyectos nuevos.
- ¿Puedo usar gradientes CSS en bordes además de fondos?
- No directamente como border-color, ya que la propiedad border no acepta gradientes. La técnica estándar para bordes con gradiente usa border-image: linear-gradient(...) 1; o una técnica con pseudo-elemento :before/:after que usa el gradiente como fondo y el elemento real tiene un fondo sólido que lo recorta. WikiPlus genera el código de fondo (background); la adaptación para border-image requiere ajuste manual.
- ¿Cuál es la diferencia entre 'to right' y '90deg' en gradientes?
- Ambos producen exactamente el mismo resultado: un gradiente que transiciona de izquierda a derecha. 'to right' es la sintaxis con palabras clave, más legible. 90deg es la notación en grados, más precisa para ángulos no estándar como 45deg, 135deg o 220deg. WikiPlus usa la notación en grados, que permite ajustar con mayor precisión la dirección del gradiente.