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

Degradado CSS Sunset: código listo para usar

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 un desvanecimiento de atardecer ya preparado cargado: coral cálido #ff7e5f fluyendo hacia melocotón suave #feb47b, de izquierda a derecha. La vista previa lo muestra en ancho completo inmediatamente y la línea CSS a continuación está lista para copiar tal como está.

Los cálidos desvanecimientos de coral a melocotón son un elemento básico de la sección de héroes porque se leen de manera amigable y enérgica sin abrumar el texto blanco. Este par tiene un tono lo suficientemente cercano como para que el punto medio se mantenga limpio: no hay una banda gris turbia en el medio, el modo de falla habitual de los degradados entre colores distantes.

Úselo sin cambios o hágalo suyo: gire el ángulo para obtener una puesta de sol en diagonal, tire del primer punto hacia adentro para una presencia de coral más fuerte o agregue un tercer punto con un color ciruela profundo cerca del 100% para una sensación de crepúsculo. Cada cambio actualiza el CSS copiable al instante.

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