Ustawa o dostępności cyfrowej stron internetowych i aplikacji mobilnych z 2019 roku, wdrażająca unijną dyrektywę o dostępności, obowiązuje w Polsce większość podmiotów publicznych — a gradient w tle tekstu jest jednym z tych elementów, które łatwo złamać wymóg minimalnego kontrastu, jeśli nie sprawdzi się go w najciemniejszym i najjaśniejszym punkcie przejścia.
Trzy sposoby rozprowadzania koloru
linear-gradient(45deg, red, blue) rozciąga kolor wzdłuż prostej linii pod zadanym kątem — najczęściej spotykany typ w tłach przycisków, banerów i kart. radial-gradient(circle, yellow, orange) rozprowadza kolor koncentrycznymi kołami lub elipsami od punktu na zewnątrz, dobry do efektu plamy światła. conic-gradient(red, yellow, green, blue, red) obraca kolor wokół punktu centralnego jak wskazówka zegara i jako jedyny z trzech typów pozwala zbudować wykres kołowy lub pierścieniowy wskaźnik postępu bez dodatkowej grafiki.
Color stops i kontrast tekstu na gradiencie
Każdy kolor można przypiąć do konkretnej pozycji procentowej, np. linear-gradient(red 0%, yellow 50%, blue 100%), kontrolując gwałtowność przejścia. Gdy na gradiencie umieszczany jest tekst, warto sprawdzić kontrast osobno w najjaśniejszym i najciemniejszym punkcie tła — jednolity kolor tekstu, który spełnia wymogi WCAG na jednym końcu przejścia, może już ich nie spełniać na drugim.
Gradienty powtarzalne
Funkcje repeating-linear-gradient() i repeating-radial-gradient() automatycznie powtarzają zadaną sekwencję color stops aż do wypełnienia całego elementu, zamiast rozciągać przejście tylko raz. Pozwala to tworzyć wzory w paski lub szachownicę jedną linią CSS, bez sięgania po obraz tekstury.
Do czego to służy
- Szybko dobrać i skopiować gotowy kod CSS gradientu bez ręcznego ustawiania kątów i kolorów.
- Zrozumieć, który typ gradientu pasuje do konkretnego efektu wizualnego.
- Precyzyjnie dostroić pozycje color stops dla pożądanego przejścia, z uwzględnieniem kontrastu tekstu.