Generador de Gradiente Granulado

Gradientes Granulados Modernos Sin Photoshop

El look "grainy gradient" — un gradiente suave espolvoreado con ruido tipo película — está por todas partes en el diseño moderno, desde páginas como Linear hasta decenas de sitios de producto premium. Este generador produce ese efecto como un SVG compacto y autocontenido que escala a cualquier resolución y se entrega sin una sola imagen.

Cómo se Aplica el Grano

Por dentro, la herramienta compone dos capas dentro de un mismo SVG. La capa base es un <rect> relleno con tu gradiente — lineal o radial, con 2 a 5 paradas. Encima va un segundo <rect> cuyo relleno es una textura de ruido monocromática generada por el filtro SVG <feTurbulence type="fractalNoise">. La capa de ruido se dibuja con una opacidad controlable, que es lo que le da ese toque "polvoriento" suave.

Como todo pasa por filtros SVG, el patrón de grano se mantiene nítido y sin repetición a cualquier tamaño — a diferencia de un PNG en mosaico, no verás costuras evidentes cuando el fondo se estira en un hero enorme.

Controles

• Tipo — lineal (con ángulo ajustable) o radial.
• Paradas de color — 2 a 5 colores con deslizadores de posición para controlar con precisión la transición.
• Intensidad del grano — opacidad de la capa de ruido. 0 desactiva el grano; valores mayores dan más textura.
• Escala del grano — baseFrequency de la turbulencia. Escala baja da grano grueso y táctil; alta da ruido fino tipo película.
• Octavas — cuántas capas de ruido se apilan. Más octavas añaden detalle.
• Semilla — entero para reproducibilidad. Misma semilla = mismo patrón de grano.

Dónde Usarlo

• Fondos hero con sensación táctil en lugar de estéril
• Pantallas de inicio y tarjetas tipo widget iOS
• Banners de lanzamiento al estilo Product Hunt
• Portadas de música y pódcast
• Tarjetas de dashboard con profundidad sutil

La salida SVG siempre es más nítida que un JPG del mismo tamaño, y sus filtros están acelerados por GPU en todos los navegadores modernos. Copia el código, pégalo en un <div> y escálalo donde quieras — el grano se mantiene fiel en todos los dispositivos y niveles de zoom.