Configuración
#FF512F0%
#DD2476100%
Vista Previa en Vivo
Salida CSS
background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);

Generador de Degradados CSS

Crea hermosos degradados CSS visualmente. Elige estilos lineales, radiales o cónicos.

Cómo Usar

1

Elegir Tipo

Selecciona el tipo de degradado Lineal, Radial o Cónico y ajusta el ángulo si es necesario.

2

Añadir Colores

Añade paradas de color, elige tus colores y arrastra los controles deslizantes para posicionarlos perfectamente.

3

Copiar CSS

Previsualiza tu degradado y haz clic en "Copiar CSS" para usarlo en tu proyecto al instante.

Preguntas Frecuentes

¿Qué soporte de navegador tienen los degradados CSS?

Los degradados CSS (Lineales y Radiales) son soportados por todos los navegadores modernos. Los degradados cónicos también son ampliamente soportados en los principales navegadores actualizados (Chrome, Firefox, Safari, Edge).

¿Cuántas paradas de color puedo añadir?

Esta herramienta te permite añadir hasta 5 paradas de color para mantener la interfaz limpia, pero CSS soporta paradas de color ilimitadas. Puedes generar el código base aquí y añadir más manualmente si es necesario.

¿Puedo usar colores transparentes?

Actualmente, esta herramienta utiliza el selector de color estándar que típicamente genera valores HEX. Para transparencia (RGBA), puedes editar el código CSS generado manualmente para reemplazar los códigos HEX con valores rgba().

¿Es gratuita esta herramienta?

Sí, nuestro Generador de Degradados CSS es completamente gratuito. No hay suscripciones y no necesitas registrarte.

¿Puedo guardar mis degradados?

Actualmente, no admitimos guardar en una cuenta, pero puedes copiar el código CSS y guardarlo en los archivos de tu proyecto.

¿Cuál es la diferencia entre lineal y radial?

Los degradados lineales cambian los colores a lo largo de una línea recta (por ejemplo, de arriba a abajo), mientras que los degradados radiales irradian desde un punto central hacia afuera.

¿Cómo uso el CSS generado?

Simplemente copie el código del cuadro Salida CSS y péguelo en su hoja de estilo bajo la propiedad "fondo" o "imagen de fondo".

¿Puedo ajustar el ángulo de un degradado lineal?

Sí, use el control deslizante Ángulo de rotación o el cuadro de entrada para establecer la dirección en grados (por ejemplo, 90 grados de izquierda a derecha).

¿Es compatible con navegadores más antiguos?

El código generado es CSS3 estándar. Para navegadores muy antiguos (como IE9), es posible que necesite prefijos de proveedor, que actualmente esta herramienta no agrega automáticamente.

¿Qué es un gradiente cónico?

Un degradado cónico rota los colores alrededor de un punto central, como un gráfico circular o una rueda de colores. Es útil para crear patrones y gráficos interesantes.