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

Generador de gradiente 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

Escribir gradiente lineal (135 grados, #2193b0 0%, #6dd5ed 100%) a mano y recargar la página para verla es un bucle lento. Este generador lo cierra: elija lineal, radial o cónico, arrastre el control deslizante de ángulo, establezca cada parada de color con un selector de color nativo y una posición porcentual, y la vista previa de ancho completo se vuelve a pintar en cada entrada, con la línea de fondo terminada siempre lista para copiar.

Los tres tipos de gradiente cubren diferentes trabajos. Los degradados lineales se desvanecen a lo largo de una dirección y llevan la mayoría de las secciones y botones de héroe; los gradientes radiales irradian desde el centro para crear brillos y viñetas; Los degradados cónicos se extienden alrededor del centro y generan gráficos circulares y ruedas de color. Puede cambiar de tipo en cualquier momento: sus paradas se transfieren, por lo que comparar las tres lleva unos segundos.

Hasta seis paradas de color le brindan espacio para diseños de múltiples bandas, y las páginas preestablecidas incluyen combinaciones probadas (una cálida puesta de sol, un océano en calma y un suave par de colores pastel) como puntos de partida que puede modificar en lugar de lienzos en blanco. Tenga en cuenta la división del trabajo: el generador de paleta de colores de este sitio selecciona colores planos armoniosos y el conversor de formato de color traduce un valor entre HEX, RGB y HSL, mientras que esta herramienta hace un trabajo diferente: convierte los colores elegidos en código de degradado CSS listo.

Todo se ejecuta localmente en su navegador: sin carga, sin cuenta, sin viajes de ida y vuelta al servidor, y el generador sigue funcionando sin conexión una vez cargado.

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