Generador de degradados radiales CSS
Crea degradados radiales circulares o elípticos en CSS y míralos en tiempo real
Diseña degradados radiales circulares o elípticos ajustando hasta cinco paradas de color, la posición del centro y la forma, con la vista previa actualizándose al momento. Pensado para diseñadores y desarrolladores front-end que necesitan el código CSS para fondos, botones o tarjetas. Todo se procesa al instante en tu navegador y no se envía ningún dato a servidores.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Elige la forma: circular o elíptica
- Haz clic en la cuadrícula de 3x3 para fijar el punto de origen del degradado
- Ajusta el color y la posición (%) de cada parada y añade o elimina paradas según necesites
- Comprueba el resultado en la vista previa y copia el código CSS generado
Preguntas frecuentes
- ¿Cuántas paradas de color puedo añadir?
- Entre 2 y 5, y puedes ajustar el color y la posición de cada una por separado.
- ¿Cómo uso el CSS generado?
- Pulsa el botón de copiar y obtendrás el código radial-gradient listo para pegar directamente en la propiedad background.
- ¿Cómo se define la posición?
- Haciendo clic en la cuadrícula de 3x3, que corresponde a las nueve posiciones por palabra clave: top left, center, bottom right, etc.