Generador de Fondos de Pantalla en Gradiente

Siguiente

Los gradientes ambientales de tres colores con un fuerte desenfoque son el estilo de fondo de cada página de aterrizaje de SaaS y la mayoría de los fondos de escritorio lanzados en los últimos cuatro años. Esta herramienta mezcla tres colores hexadecimales con un ángulo ajustable y un desenfoque gaussiano, y exporta el resultado a resolución de escritorio, teléfono o fondo de Zoom.

Cómo crear un fondo de pantalla en gradiente

  1. 1

    Elige tres colores

    Ajusta los valores hexadecimales directamente o presiona Aleatorizar para una paleta sorpresa.

  2. 2

    Establece el ángulo

    0–360°. 135° es la diagonal de "atardecer"; 90° es la mezcla lateral de "amanecer".

  3. 3

    Ajusta el desenfoque

    Un desenfoque mayor oculta los límites entre colores y suaviza todo el lienzo.

  4. 4

    Exporta la imagen

    Descarga a la resolución que coincida con tu pantalla o teléfono.

Tamaños de salida recomendados

Objetivo Resolución
Escritorio 4K 3840 × 2160
Escritorio 1440p 2560 × 1440
Escritorio 1080p 1920 × 1080
iPhone 15/16 1179 × 2556
Android (moderno) 1080 × 2400
Fondo virtual de Zoom 1920 × 1080

Sugerencias de paleta que siempre funcionan

  • Par de complementarios + neutro: azul, naranja, beige.
  • Trío análogo: elige tres tonos dentro de 60° en la rueda de colores, púrpura, magenta, rosa.
  • Tensión cálido-frío: uno cálido (durazno, rojo), uno frío (verde azulado, azul marino), uno neutro (crema).
  • Monocromo: un tono en tres valores crea una pared sutil y consistente en el estado de ánimo.

Por qué importa el desenfoque

Un gradiente de tres paradas sin desenfoque muestra límites nítidos en las paradas de color (el “efecto arcoíris”). Un filter: blur() de 60–100 px en un lienzo grande suaviza las transiciones en lavados que recuerdan a los fondos de pantalla de macOS Big Sur o iOS 16.

Vista previa de CSS en vivo

background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);

Si prefieres un gradiente nítido sin desenfoque, baja el filtro a 0 y considera cambiar a la interpolación in oklch para una mezcla perceptualmente uniforme.

Preguntas frecuentes

Un filtro de desenfoque toma muestras de píxeles fuera del lienzo y esos son transparentes. Para un fondo de pantalla, genera a un tamaño mayor, desenfoca y luego recorta a la resolución final, los bordes se mantienen limpios.

Este generador utiliza tres. Más colores tienden a parecer un salvapantallas; tres es el punto ideal para un fondo de pantalla tranquilo.

No exactamente. Las proporciones del teléfono son más altas que las del escritorio, por lo que el ángulo diagonal se percibe de manera diferente. Previsualiza en cada tamaño objetivo y ajusta el ángulo si uno se ve raro.

No. El lienzo se dibuja localmente y solo la descarga que inicias sale del navegador.

Herramientas relacionadas