Generador de degradados CSS
Crea degradados CSS lineales, radiales y cónicos con varias paradas de color y copia el código.
background: —;
Todo se ejecuta en tu navegador: sin subidas ni registro.
Acerca de Generador de degradados CSS
El Generador de Gradientes CSS construye gradientes lineales, radiales y cónicos con control visual completo. Añade paradas de color haciendo clic en la barra de gradiente, arrástralas para reposicionarlas, y dale a cada parada su propio color, opacidad y posición. Los gradientes lineales obtienen un control de ángulo; los radiales, una forma (círculo o elipse) y posición; los cónicos, un ángulo inicial.
La vista previa en vivo muestra exactamente lo que renderizará el navegador, y un botón de aleatorizar más un conjunto de ajustes predefinidos seleccionados están ahí cuando necesites un punto de partida en lugar de un lienzo en blanco. Las paradas se pueden añadir y eliminar libremente; un gradiente solo necesita al menos dos.
Cuando se vea bien, copia el valor del gradiente a secas o una regla CSS completa. El generador se ejecuta por completo en tu navegador sin subida ni registro, lo que lo convierte en un compañero rápido para botones, fondos de héroe, bordes y efectos de texto.
Cómo usar Generador de degradados CSS
- Elige el tipo de gradiente: lineal, radial o cónico.
- Establece el ángulo (lineal), la forma y posición (radial), o el ángulo inicial (cónico).
- Haz clic en la barra de gradiente para añadir paradas de color y arrástralas a su posición.
- Dale a cada parada su color, opacidad y posición exacta.
- Prueba los ajustes predefinidos o el botón de aleatorizar para una inspiración rápida.
- Copia el valor del gradiente o la regla CSS completa.