⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Generador de gradiente radial CSS

Cree degradados CSS visualmente: tipo lineal, radial o cónico, control deslizante de ángulo y hasta seis paradas de color con una vista previa en vivo de ancho completo y código copiable.

90°
Procesando... 0%

Resultado

Esta página abre el generador de degradado con el tipo radial ya seleccionado: los colores se irradian hacia afuera desde el centro del elemento en círculos concéntricos y cada parada que cambia vuelve a pintar la vista previa al instante.

radial-gradient() es la herramienta para efectos de foco y brillo, viñetas suaves y fondos que necesitan un punto focal en lugar de una dirección. Las posiciones de las paradas en porcentaje se asignan a la distancia desde el centro (0% es el medio, 100% el borde más alejado), por lo que apretar las primeras paradas crea un pequeño núcleo brillante, extenderlas crea un lavado amplio.

Copie la línea de fondo una vez que la vista previa se vea bien. El control deslizante de ángulo está oculto en este modo porque un círculo no tiene dirección; vuelva a cambiar a lineal o cónico y reaparece.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Selección de tipo de degradado (lineal, radial, cónico) con un control deslizante de ángulo para modos lineal y cónico.
  • Lista de paradas de colores: dos paradas para comenzar, agregue o elimine hasta seis, cada una con su propio selector de color y posición en porcentaje.
  • Línea CSS de fondo copiable más páginas preestablecidas listas para usar para degradados de puesta de sol, océano y pastel.

Beneficios clave

✓ La vista previa de ancho completo se vuelve a pintar con cada cambio (tipo, ángulo y cada parada de color) para que el CSS que copie sea exactamente lo que vio.
✓ Hasta seis paradas de color con posiciones individuales cubren todo, desde un simple desvanecimiento de dos colores hasta complejos fondos multibanda.
✓ Una declaración, tres motores: cambia entre lineal, radial y cónico sin reconstruir tus paradas.

Casos de uso

  • • Componga un fondo de sección de héroe arrastrando el ángulo y las paradas de color en lugar de editar manualmente el gradiente lineal() y recargar.
  • • Compare las paradas del mismo color como degradados lineales, radiales y cónicos con un solo interruptor: las paradas se transfieren entre tipos.
  • • Elija una combinación probada de la página preestablecida de puesta de sol, océano o pastel y ajústela a los colores de su marca.