Co je banding a proč se vyskytuje
Když se pokoušíme vytvořit jemný přechod mezi dvěma barvami — třeba z tmavě modré do světle modré — webový prohlížeč někdy nemá dost barevných stupňů. Místo hladkého gradientu se objevují viditelné pásy. Tomu se říká banding.
Je to částečně problém omezené barevné hloubky a částečně to, jak lidské oko vnímá barevné změny. Jednoduchý gradient vypadá lajnovaně. Ale máme řešení — a není to složité. Vrstva šumu může změnit vše.
Jak šum zmírňuje banding
Princip je elegantní. Přidáte vrstvu tenké zrnitosti — šumu — přes váš gradient. Lidské oko pak neuvidí tvrdé pásy, ale bude vnímat všechny ty maličké náhodné pixely. Mozek to interpretuje jako kontinuální přechod. Trik funguje, protože náš zrak vnímat šum jako součást detailu spíš než chyby.
Praktické číslo: Vrstva šumu s opacitou 2–5 % obvykle postačuje. Nevidíte ji vědomě, ale funguje.
Poznámka o prohlížečích
Tato technika je čistě vizuální a funguje ve všech moderních prohlížečích. Výsledky se mohou mírně lišit v závislosti na zařízení a nastavení displeje. Banding se může projevovat více na některých obrazovkách než na jiných — zejména na starších nebo levnějších displejích. Testování na různých zařízeních se doporučuje.
Implementace: CSS přístup
Pokud chcete šum přidat pomocí CSS, nejjednodušší cesta je SVG šum filtr. Vytvořit můžete filtr přímo v CSS nebo jej uložit jako SVG soubor. Zde je základní vzor:
.gradient-with-noise {
background: linear-gradient(to bottom, #2d5016, #1a3a0f);
filter: url(#noise);
}
SVG filtr pak definujete přímo v HTML. Výhodou je, že si můžete nastavit přesnou úroveň šumu a jeho vlastnosti. Nevýhodou? Mírně se zvýší komplexita HTML kódu. Ale výsledek stojí za to.
Tři praktické techniky
SVG filtr
Nejprecizněji kontrolovaná metoda. Vytvořte SVG s feTurbulence filtrem a aplikujte jej na div s gradientem. Umožňuje vám upravovat seed, frekvenci a opacitu.
PNG overlay
Jednodušší přístup: vytvořte si v Photoshopu nebo Affinity Designer šumovou texturu, exportujte ji jako PNG a použijte ji jako background-image. Rychlé a spolehlivé.
Dithering efekt
Pokud chcete více retro vzhled, použijte dithering — předvídavé vzory místo náhodného šumu. Působí to lépe u pastelových a omezených barevných palet.
Nejlepší výsledky s tlumenými barvami
Šum funguje nejlépe s pastelními a tlumenými barvami. Když máte gradient z velmi světlé barvy do trochu tmavší, banding se jeví výrazněji. Zde se šum stane vaším nejlepším přítelem. Opacita 3–4 % je často ideální pro tyto případy.
Pokud pracujete s vibrujícími, nasycenými barvami, banding je méně patrný. Ale šum vám stejně dá hlubší, autentičtější vzhled — ten vintage-moderní mix, který dnes vidíme v kvalitních webech.
Shrnutí: Jednoduchý hack s velkým dopadem
Banding je vizuální problém, ale má elegantní řešení. Vrstva jemného šumu vám dá lepší přechody, profesionálnější vzhled a ten kýžený vintage charakter. Není to složité, není to drahé — je to jen pár řádků CSS nebo PNG obrázku.
Zkuste to sami. Vezměte si nějaký gradient, který vám vypadá lajnovaně, přidejte šum a podívejte se, jak se změní. Málokdy se vyplatí méně času investovaného s větším vizuálním zlepšením.
