Cómo montar tu degradado
La herramienta funciona de dos maneras, que eliges con los botones de arriba. Abre en aplicar sobre mis imágenes, con la zona de subida lista: arrastra una o varias fotos —se aceptan JPG, PNG, WEBP, GIF y BMP— y el degradado se dibuja encima de cada una. Con más de una foto cargada, aparecen pestañas con el nombre de los archivos sobre la previsualización para que puedas cambiar entre ellas. En el segundo botón, crear un fondo, no subes nada: eliges los colores, el tipo de degradado y el tamaño, y la imagen se genera al instante.
El degradado tiene cuatro tipos. Lineal traza la transición en línea recta, con el ángulo controlado por el deslizador según la misma convención del CSS, donde 0 grados apunta hacia arriba. Radial parte del centro y se expande en círculo. Cónico gira los colores alrededor del punto central y produce ese efecto de abanico que se usa en fondos modernos. Ninguno desactiva el degradado: sobre tus fotos, la imagen pasa intacta y solo recibe los acabados; en el modo de crear un fondo, el primer color se convierte en un fondo sólido. Los colores están justo debajo: cada fila tiene su selector, un control de posición en porcentaje y un botón para quitarlo. Puedes usar de dos a seis paradas de color, y el botón de añadir color inserta una nueva entre las existentes. Si prefieres partir de algo hecho, la cuadrícula de paletas trae doce combinaciones probadas, y el botón de degradado aleatorio sortea colores y ángulo en cada clic.
Las seis texturas se aplican encima del degradado y su intensidad es regulable. El grano de película añade grano monocromo: varía solo el brillo de los píxeles y deja el color en paz, y es el recurso de referencia para eliminar las franjas que aparecen en degradados lisos. El ruido de color hace justo lo contrario, varía solo el color y mantiene el brillo intacto, dándote el aspecto de una foto hecha con ISO alto. Líneas dibuja trazos diagonales y Puntos crea una trama regular, ambos útiles para fondos con patrón gráfico. Papel combina un grano suave con un ligero oscurecimiento en los bordes, imitando papel impreso. Aparte de las texturas hay dos acabados. La viñeta oscurece los cuatro bordes de forma progresiva y lleva la mirada al centro. El degradado lateral hace lo mismo en un solo lado —arriba, abajo, izquierda o derecha— con cuatro tipos: oscurecer para recibir texto claro, aclarar para texto oscuro, usar el primer color del degradado, o desvanecer el borde hasta dejarlo transparente. Los controles de alcance e intensidad definen hasta dónde llega la banda y cuánto pesa. Los dos se aplican al final, después de todo lo demás, así que se comportan igual en cualquiera de los dos modos y el modo de fusión no los altera.
En el modo de crear un fondo, elige uno de los seis tamaños listos —Full HD, cuadrado, historia, miniatura, Open Graph o fondo de escritorio— o escribe el ancho y el alto en los campos personalizados, hasta 6000 px por lado. El bloque de código CSS muestra la declaración equivalente al degradado actual, y el botón lo copia entero al portapapeles, listo para pegar en tu hoja de estilos. Por último, elige PNG, JPG o WEBP y descarga la imagen; en el modo de superposición con varias fotos, el botón de descargar todas te entrega el lote en un único archivo .zip.
Preguntas frecuentes
¿Se guardan en algún sitio las imágenes que subo?
No. El degradado se dibuja en tu navegador y las imágenes del modo de superposición nunca viajan por internet. Nada queda guardado en un servidor.
¿Necesito subir alguna imagen para usar la herramienta?
No. En el modo de crear un fondo solo eliges los colores y el tamaño, y el archivo se genera al momento. Subir imágenes solo hace falta para el modo de superposición, donde el degradado se dibuja encima de tus propias fotos.
¿Cuál es la diferencia entre descargar la imagen y copiar el CSS?
El CSS genera el degradado en vivo en el navegador de quien visita tu web, sin descargar ningún archivo: es la opción más liviana, con coste cero de ancho de banda, e ideal para fondos de sección y botones. El PNG o el JPG se vuelven necesarios cuando el destino no interpreta CSS, como la portada de una historia, la miniatura de un vídeo, una diapositiva o un fondo de escritorio. Y no olvides que la textura solo existe en la imagen exportada, porque los degradados CSS no tienen grano.
¿Qué tamaño conviene para cada red social o uso?
Los preajustes cubren los casos más habituales: 1080×1080 para una publicación cuadrada de Instagram o Facebook, 1080×1920 para historias y Reels, 1280×720 para una miniatura de YouTube, 1200×630 para la imagen de Open Graph que se ve en WhatsApp y LinkedIn, 1920×1080 para diapositivas y 2560×1440 para fondo de escritorio. Si necesitas otra medida, escribe el ancho y el alto en los campos personalizados, hasta 6000 px por lado.
¿Para qué sirve el grano en un degradado?
Los degradados lisos en pantallas de 8 bits suelen mostrar franjas de color visibles, un defecto conocido como banding, y empeora cuanto más parecidos son los dos colores. Una capa ligera de grano entre el 20% y el 40% rompe esas franjas y hace que la transición se lea como continua. Además, el grano aporta ese acabado de impresión que se ha vuelto habitual en identidad de marca y portadas de proyecto.
¿Cómo pongo un degradado sobre una foto sin borrar lo que se ve en ella?
Elige el modo de superposición y empieza con la opacidad entre el 40% y el 60%. Los modos de fusión cambian mucho el resultado: multiplicar oscurece y va bien para poner texto claro encima, trama aclara, y color tiñe la foto conservando su contraste original, que es el modo que más detalle preserva. Para portadas con titular, un degradado oscuro en multiplicar por la parte de abajo mantiene el texto legible sin esconder la imagen.
¿Puedo usar solo la textura o la viñeta, sin ningún degradado?
Sí. Elige Ninguno en la primera opción, tipo de degradado. Sobre tus fotos, la imagen pasa intacta y solo recibe lo que actives después: grano, viñeta o degradado lateral. Eso convierte la herramienta en una forma rápida de dar acabado de película a una foto sin alterar sus colores. En el modo de crear un fondo, Ninguno usa el primer color como fondo sólido, útil para generar un color plano con grano.
¿Cuál es la diferencia entre grano de película y ruido de color?
Los dos reparten variación aleatoria por los píxeles, pero en ejes opuestos. El grano de película solo altera el brillo y deja el color intacto, reproduciendo el grano fotográfico: es el que rompe las franjas visibles de los degradados lisos. El ruido de color hace lo contrario, altera solo el color y mantiene el brillo, generando motitas de color parecidas a una foto de cámara con ISO alto. En la práctica: usa grano como acabado y para corregir el banding, y ruido de color cuando busques un aire analógico o de pantalla antigua.
¿Para qué sirve la viñeta y qué intensidad conviene?
La viñeta oscurece los bordes de forma progresiva y empuja la atención hacia el centro de la imagen: un recurso clásico en fotografía y en portadas de vídeo, donde una cara o un producto tiene que competir con el fondo. Entre el 30% y el 50% el efecto es sutil y pasa desapercibido, que suele ser lo ideal; por encima del 70% se vuelve evidente y adopta un tono dramático. Como la viñeta se dibuja al final, después del degradado, el modo de fusión elegido no influye en ella.
¿Cómo oscurezco solo la parte de abajo de una foto para poner un titular?
Activa el degradado lateral y elige el borde del lado donde vaya el texto, dejando el tipo en oscurecer. Por defecto viene la izquierda, que cubre el caso más habitual de banner con titular a la izquierda e imagen a la derecha; para una portada de vídeo, con el título abajo, cambia al borde inferior. Un alcance entre el 35% y el 50% con la intensidad en torno al 75% da contraste al texto blanco sin esconder el motivo de la foto.
¿Puedo aplicar el mismo degradado a varias fotos a la vez?
Sí. En el modo de superposición, sube todas las imágenes que quieras: los mismos colores, textura, opacidad y fusión se aplican a todas, y la descarga en .zip te entrega el lote completo. Es la vía más rápida para dejar homogéneas las portadas de un blog o las miniaturas de un canal.