Generator wzorów tła CSS

Czym jest to narzędzie?

CSS potrafi rysować powtarzalne wzory bez żadnych plików graficznych, wykorzystując gradienty — radial-gradient() i linear-gradient() — jako background-image, w połączeniu z background-size mniejszym niż sam element, dzięki czemu gradient kafelkuje się i powtarza. Kropki polka dot wykorzystują powtarzający się radial-gradient, paski i szachownice — powtarzające się lub nałożone warstwami linear-gradient(), a linie siatki — dwie nakładające się linie linear-gradient().

To narzędzie generuje te deklaracje gradientów za Ciebie. Wybierz typ wzoru, dostosuj kolor wzoru, kolor tła i odstępy, a następnie obserwuj, jak podgląd na żywo się aktualizuje — na koniec skopiuj dokładny kod CSS dla background-image i background-size.

Źródło: CSS Images Module Level 3, W3C — definiuje repeating-linear-gradient() i repeating-radial-gradient(), funkcje, na których oparte są te wzory.

Dlaczego warto go używać?

• Brak plików graficznych, brak zapytań HTTP — wzór to czysty CSS, renderowany natychmiast w dowolnej rozdzielczości, w tym na ekranach retina/wysokiej gęstości pikseli.
• Pełna możliwość dostosowania koloru i odstępów bez ręcznego pisania składni gradientów czy obliczania matematyki kafelkowania.
• Podgląd na żywo pokazuje dokładny powtarzający się wzór, zanim jeszcze cokolwiek skopiujesz.
• Skaluje się bez utraty jakości, ponieważ jest to matematyka wektorowa, a nie obraz rastrowy — brak rozmycia przy zmianie rozmiaru elementu.
• Działa całkowicie w przeglądarce — żadne wprowadzone przez Ciebie ustawienia nie są nigdzie przesyłane.
• Bezpłatne, bez rejestracji, działa na urządzeniach mobilnych.

Jak używać

1. Wybierz typ wzoru: kropki polka dot, ukośne paski, szachownicę lub linie siatki.
2. Wybierz kolor wzoru oraz kolor tła widoczny między/za kształtami wzoru.
3. Dostosuj suwak rozmiaru, aby kropki, paski lub komórki siatki były większe lub mniejsze — kontroluje to również, jak gęsto wzór się powtarza.
4. Skopiuj wygenerowany kod CSS i wklej go jako background-image (oraz background-size/background-position tam, gdzie są pokazane) dowolnego elementu.

Przykład

Wejście

Wzór: kropki polka dot · Kolor: niebieski · Tło: białe · Rozmiar: 24px

Wynik

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Klasyczny, jasny wzór kropek polka dot, często wykorzystywany jako subtelne tło sekcji lub tekstura karty.

Jak powstaje każdy wzór

• Kropki polka dot: radial-gradient() rysuje jedno małe, wypełnione kółko, a background-size sprawia, że powtarza się ono jako kafelkowana siatka kropek.
• Ukośne paski: repeating-linear-gradient() pod kątem 45 stopni naprzemiennie przechodzi między kolorem wzoru a kolorem tła w stałym odstępie.
• Szachownica: dwie nakładające się warstwy linear-gradient() pod kątem 45 stopni, przesunięte względem siebie o pół kafelka, tworzą naprzemienne jasne/ciemne kwadraty.
• Linie siatki: dwie cienkie linie linear-gradient() — jedna pozioma, jedna pionowa — kafelkowane w wybranym odstępie, tworząc siatkę podobną do papieru milimetrowego.

Kiedy używać wzorów CSS zamiast plików graficznych

Wzór gradientowy CSS nie ma rozmiaru pliku ani nie wymaga zapytania HTTP, więc ładuje się natychmiast i nigdy nie wygląda na rozmyty na ekranach o wysokiej gęstości pikseli, w przeciwieństwie do rastrowego kafelka PNG w tle. Idealnie nadaje się do subtelnych tekstur pod tekstem, separatorów sekcji, ilustracji dla stanów pustych czy kart zastępczych. Dla złożonych, ilustrowanych lub fotograficznych wzorów, właściwym narzędziem nadal jest prawdziwy obraz — gradienty CSS najlepiej sprawdzają się w przypadku prostych, geometrycznych, powtarzalnych kształtów, takich jak te tutaj.

Łączenie z innymi efektami CSS

Wzory dobrze sprawdzają się jako tło za kartami w stylu glassmorphizmu, ponieważ rozmycie potrzebuje czegoś z detalami wizualnymi za sobą, aby było widoczne. Świetnie łączą się też z zaokrąglonymi rogami kontenera.

→ Generator glassmorphizmu CSS · Generator promienia krawędzi

Najczęściej zadawane pytania