Generator tła wzorzystego

Czysty CSS, bez plików obrazów

Każdy wzór tutaj jest rysowany gradientami CSS na jednolitym background-color. Nie ma nic do hostowania ani żadnego dodatkowego żądania HTTP: cała tekstura żyje w arkuszu stylów. Wzór z kropek wygląda na przykład tak:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
}

Kod CSS powtarza motyw na całej powierzchni tła. Odstęp steruje gęstością wzoru, ale nie zmienia grubości każdej linii ani wielkości każdej kropki. Przy niektórych poziomach powiększenia lub ułamkowych pikselach urządzenia mogą pojawić się bardzo cienkie linie na granicach powtórzeń.

Z czego zbudowany jest każdy motyw

Wskazówki o kolorze i kontraście

• Utrzymuj niski kontrast tła. Kolor wzoru zbliżony do koloru tła daje spokojniejszy efekt. Wysoki kontrast może odciągać uwagę od treści.
• Dopasuj do marki. Użyj koloru marki jako koloru wzoru zamiast zwykłej szarości, by tekstura wiązała się z Twoją tożsamością.
• Tryb ciemny. Wybierz ciemny kolor tła i nieco jaśniejszy kolor wzoru. Bardzo kontrastowe wzory mogą utrudniać odbiór treści na ciemnych powierzchniach.
• Sprawdź tekst na obu kolorach. Niewielka różnica między kolorami tła nie gwarantuje odpowiedniego kontrastu tekstu. Przetestuj kolor tekstu zarówno na kolorze bazowym, jak i na kolorze wzoru. To narzędzie nie sprawdza zgodności z WCAG.

Gdzie tego użyć

• Tła nagłówków i sekcji, które potrzebują odrobiny tekstury bez obrazu.
• Karty i panele w dashboardzie, gdzie delikatna siatka lub kropki dodają struktury.
• Puste stany i symbole zastępcze, gdzie szachownica stanowi znajomy sygnał wizualny.
• Układy w stylu druku i slajdy, które wymagają charakteru papieru milimetrowego lub kreskowania.

Ponieważ wynik składa się wyłącznie z CSS, nie wymaga osobnego żądania obrazu. Kod można później zmienić w narzędziach deweloperskich przeglądarki.