Generador de degradados CSS
Crea un degradado CSS lineal, radial o cónico con paradas de color y un ángulo, previsualízalo en vivo y copia la regla background.
Generador de degradados CSS — Elige un tipo de degradado, ajusta el ángulo y añade tantas paradas de color como necesites, cada una con su propio color y porcentaje de posición. Un cuadro de vista previa se actualiza mientras editas y se muestra la regla CSS background lista para pegar, con copia de un clic. Todo se ejecuta por completo en tu navegador; ningún color ni CSS se envía nunca a un servidor.
¿Qué es Generador de degradados CSS?
El Generador de Degradados CSS es una herramienta en línea gratuita para diseñadores web y desarrolladores front-end que necesitan un degradado rápido sin escribir la sintaxis a mano. Elige un degradado lineal, radial o cónico, ajusta el ángulo en grados para los tipos lineal y cónico, y define paradas de color con un color HEX y un porcentaje de posición cada una. Mientras editas, una vista previa muestra el resultado y la regla CSS background correspondiente se actualiza al instante para que puedas copiarla directamente en una hoja de estilos. Úsalo para diseñar botones, fondos de portada, tarjetas y superposiciones, o para aprender cómo funcionan las funciones linear-gradient(), radial-gradient() y conic-gradient().
Cómo usar Generador de degradados CSS
- Elige el tipo de degradado: Lineal, Radial o Cónico.
- Para un degradado lineal o cónico, ajusta el ángulo en grados (0-360); el radial usa un círculo centrado e ignora el ángulo.
- Edita cada parada de color: escribe o elige un color HEX y ajusta su posición como porcentaje (0-100).
- Haz clic en Añadir parada para insertar otro color, o en el icono de la papelera para eliminar una parada (se mantienen al menos dos).
- Observa cómo se actualiza el cuadro de vista previa y copia la regla CSS background generada con el botón de copiar.
Ejemplos
Degradado lineal simple de dos colores
Entrada
Lineal, 90deg, #4f86f7 en 0% y #9333ea en 100%
Salida
background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);
Degradado radial de tres paradas
Entrada
Radial, paradas #ffffff 0%, #4f86f7 50%, #1e3a8a 100%
Salida
background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);
Degradado cónico para una rueda de color
Cambia el tipo a Cónico, ajusta el ángulo inicial y añade varias paradas en posiciones equidistantes para barrer los colores alrededor de un punto central, ideal para muestras tipo gráfico circular o ruedas de carga.
Preguntas frecuentes
- ¿Qué tipos de degradado se admiten?
- Tres: linear-gradient (con un ángulo en grados), radial-gradient (un círculo centrado) y conic-gradient (con un ángulo inicial). Cambia entre ellos con el selector de tipo y el CSS se actualiza al instante.
- ¿Cómo funcionan las paradas de color y las posiciones?
- Cada parada tiene un color y un porcentaje de posición de 0 a 100. Las paradas se escriben en el CSS en el orden en que aparecen en la lista, tal como las interpreta el navegador, así que tú controlas el orden directamente. Puedes añadir paradas con Añadir parada y eliminarlas hasta un mínimo de dos.
- ¿Puedo elegir colores visualmente en lugar de escribir el HEX?
- Sí. Haz clic en la pequeña muestra de color junto a cada parada para abrir el selector de color nativo de tu navegador, o escribe un valor HEX como #4f86f7 directamente en el campo de color. La vista previa y el CSS se actualizan a medida que lo cambias.
- ¿Por qué desaparece el campo de ángulo en los degradados radiales?
- Aquí un degradado radial se dibuja como un círculo centrado, que no usa un ángulo, por lo que el campo de ángulo solo se muestra para los tipos lineal y cónico, donde cambia la dirección.
- ¿Se suben mis colores o CSS a algún sitio?
- No. El degradado se construye por completo en tu navegador con matemáticas locales de cadenas y colores; ningún color, CSS ni configuración se envía nunca a un servidor, por lo que funciona sin conexión y mantiene tu trabajo privado.
Herramientas relacionadas
Código a imagen
Convierte un fragmento de código en una imagen PNG pulida con resaltado de sintaxis en tu navegador, con tema, fondo de degradado o transparente y relleno, sin subir nada.
Verificador de contraste de color
Comprueba la relación de contraste WCAG entre un color HEX de primer plano y uno de fondo, y si cumple AA y AAA para texto normal y grande.
Generador de tonos de color
Convierte un color HEX base en una escala de tonos 50-950 al estilo Tailwind, mezclando hacia blanco y negro, con muestra y HEX copiable.
Generador de box-shadow CSS
Crea sombras CSS box-shadow de varias capas con controles de desplazamiento, desenfoque, expansión, color e inset y copia la propiedad lista para usar.