Generador de degradados CSS
Crea gradientes lineales, radiales o cónicos, ajusta cada color y copia el CSS listo para usar.
- Vista previa instantánea
- Sin registro
- Gratis
Vista previa del degradado
linear-gradient(to right, #667EEA 0%, #764BA2 100%)Colores intermedios
Cómo crear degradados y gradientes CSS
Selecciona el tipo de degradado, elige la dirección y modifica los colores. La vista previa y el código CSS se actualizan al instante. Después puedes copiar la regla completa, copiar únicamente la función gradient o descargar un archivo CSS.
Linear-gradient distribuye los colores sobre una línea; radial-gradient los expande desde un punto central; y conic-gradient los rota alrededor de un centro. El generador permite probar los tres tipos sin escribir el código manualmente.
Pulsa Añadir color para crear un nuevo punto. Puedes editar su código HEX y definir su posición entre 0% y 100%. El generador admite hasta seis colores y también permite eliminarlos, invertirlos o probar combinaciones preparadas.
Activa Repetir degradado. El código cambiará a repeating-linear-gradient, repeating-radial-gradient o repeating-conic-gradient según el tipo seleccionado. Ajusta las posiciones para controlar el tamaño y la frecuencia del patrón.
Sí. Copia la regla CSS y reemplaza .element por el selector de tu componente. Los degradados modernos funcionan en los navegadores actuales; para proyectos con requisitos especiales conviene comprobar la compatibilidad del tipo cónico.