Generador de Degradados
Crea hermosos degradados CSS con vista previa en vivo.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);Acerca del Generador de Degradados
Crea impresionantes degradados CSS para tus proyectos web. Personaliza colores, posiciones y ángulos. Copia el código CSS generado directamente a tu hoja de estilos.
¿Qué es esta herramienta?
Nuestro generador de gradientes CSS te permite crear hermosos gradientes lineales y radiales visualmente al seleccionar colores, ajustar posiciones y establecer la dirección o ángulo. El código CSS se actualiza en vivo mientras diseñas, y puedes copiarlo con un solo clic para pegar directamente en tu hoja de estilos. No se necesita software de diseño.
Cómo usar
- Elige el tipo de gradiente: Lineal o Radial.
- Haz clic en cualquier parada de color para cambiar su color usando el selector de colores.
- Agrega más paradas de color haciendo clic en la barra de gradiente.
- Arrastra las paradas de color para ajustar sus posiciones.
- Establece el ángulo o dirección del gradiente para gradientes lineales.
- Copia el código CSS generado con el botón copiar.
Casos de uso común
- Diseño de gradientes de fondo para páginas web, botones o tarjetas
- Creación de transiciones de color suave para elementos de interfaz de usuario
- Generación de CSS de gradiente sin escribir la sintaxis manualmente
- Experimentación con combinaciones de colores para un proyecto visual
Consejos y trucos
- Los gradientes lineales con 2-3 paradas generalmente se ven más limpios que los que tienen muchas paradas.
- Usa colores análogos (cercanos en la rueda de colores) para gradientes suaves y agradables.
- Agrega una parada de color transparente para crear un efecto de desvanecimiento en un lado.
Preguntas frecuentes
¿Cuál es la diferencia entre un gradiente lineal y radial?
Un gradiente lineal transiciona colores a lo largo de una línea recta en un ángulo elegido, mientras que un gradiente radial irradia colores hacia afuera desde un punto central en un patrón circular o elíptico.
¿Cómo agrego más de dos colores a mi gradiente?
Haz clic en cualquier lugar de la barra de gradiente para agregar una nueva parada de color, luego haz clic en ella para asignar un color y arrástrala para ajustar su posición en la secuencia.
¿Puedo controlar el ángulo exacto de un gradiente lineal?
Sí. Usa el control de ángulo para establecer cualquier dirección en grados, desde un gradiente de arriba a abajo recto (180 grados) hasta cualquier diagonal personalizada.
¿Cómo copio el CSS generado a mi proyecto?
Haz clic en el botón copiar junto a la salida de código CSS — copia la declaración completa background: linear-gradient(...) o radial-gradient(...) lista para pegar en tu hoja de estilos.
¿Esta herramienta almacena o carga los gradientes que creo?
No. Todo se genera y renderiza localmente en tu navegador — no se guardan datos de gradiente ni se envía a un servidor.
Crea impresionantes degradados CSS con nuestro generador de degradados gratuito. Diseña degradados lineales y radiales, personaliza colores, copia el código CSS al instante.
generador de degradados · degradado css · degradado lineal · degradado radial · crear degradado · degradado de colores · generador de degradados css · degradado de fondo · herramienta de degradados