Generador de Gradiente CSS
Qué es Generador de Gradiente CSS
Un generador de gradiente CSS te permite crear un degradado lineal o radial visualmente y copiar el CSS exacto. Elige el tipo de gradiente, define el ángulo (lineal) o la forma y posición (radial), añade tantos puntos de color como necesites y ajusta cada uno en la posición correcta. La vista previa se actualiza al instante y el cuadro de salida siempre muestra una declaración background lista para pegar.
Cómo usar
- Elige Lineal o Radial como tipo de gradiente.
- Ajusta el control de ángulo para gradientes lineales, o elige la forma y posición para los radiales.
- Define el color y la posición de cada punto, y añade más con el botón Añadir punto de color.
- Copia el CSS generado en el cuadro de salida y pégalo en tu hoja de estilos.
Cuándo usarla
¿Estás armando una sección hero y necesitas un fondo azul a rosa suave? Define dos puntos en 0% y 100%, elige un ángulo y copia background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); directo a tu CSS. Igual de útil para overlays de tarjetas, estados hover de botones o un brillo radial detrás de un logo, sin ajustar la sintaxis del gradiente a mano en las devtools.
Preguntas frecuentes
¿Cuál es la diferencia entre un gradiente lineal y uno radial?
Un gradiente lineal transiciona los colores a lo largo de una línea recta en un ángulo fijo, como un atardecer pasando de naranja a violeta. Un gradiente radial transiciona los colores hacia afuera desde un punto central en círculo o elipse, como un foco de luz o un efecto de brillo.
¿Cuántos puntos de color puedo añadir?
Los que quieras. Todo gradiente necesita al menos dos puntos para renderizarse, y puedes añadir más con el botón Añadir punto de color para crear transiciones con varios colores, como arcoíris o paletas de marca.
¿Qué significa el porcentaje de posición en cada punto?
La posición indica dónde ese color alcanza su máxima intensidad a lo largo del gradiente, de 0% (inicio) a 100% (fin). Mover la posición de un punto cambia dónde domina su color y cómo se mezcla con los vecinos.
¿El CSS generado funciona en todos los navegadores?
Sí. linear-gradient() y radial-gradient() son funciones CSS estándar compatibles con todos los navegadores modernos, sin necesidad de prefijos.
¿Puedo compartir esta herramienta con mi gradiente precargado?
Sí. La URL se actualiza automáticamente mientras armas el gradiente. Cópiala desde la barra de direcciones o usa el botón Compartir, y quien la abra verá exactamente el mismo gradiente.
Herramientas relacionadas
Calculadora de Relación de Aspecto
Calcula la relación de aspecto, encuentra el ancho o alto que falta y redimensiona imágenes y vídeos manteniendo las proporciones. Gratis.
Generador de Código de Barras
Genera códigos de barras EAN-13 o Code 128 online. Introduce tu número o texto y descarga como SVG o PNG. Gratis, sin registro.
Decodificador Base64
Decodifica cadenas Base64 a texto plano al instante. Soporta salida Unicode completa con emojis. Decodificador Base64 gratuito.