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

Generador de gradiente lineal 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 lineal ya seleccionado. Arrastre el control deslizante de ángulo para rotar el desvanecimiento, ajustar las paradas de color y la vista previa de ancho completo más la actualización de la línea CSS en cada entrada.

linear-gradient() pinta colores a lo largo de una línea recta, el degradado más utilizado en CSS con diferencia. 90 grados corre de izquierda a derecha, 180 grados de arriba a abajo, y cualquier ángulo intermedio da una diagonal; las posiciones de parada en porcentaje deciden dónde cada banda de color comienza a mezclarse con la siguiente.

Cuando la vista previa se vea bien, copie la línea de fondo en su hoja de estilo. Si desea un punto de partida en lugar de una pizarra en blanco, las páginas preestablecidas de puesta de sol, océano y pastel abren esta misma herramienta con pares de colores probados ya cargados.

🛡️
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.