Stylizacja tła za pomocą CSS

Generator wzorów tła CSS to narzędzie online, które tworzy płynne, czyste wzory tła CSS przy użyciu gradientów CSS. Obsługuje pięć typów wzorów: kropki, siatkę, ukośne, zygzaki i fale. Wszystkie wzory są generowane w całości za pomocą CSS — nie są wymagane żadne obrazy — co czyni je lekkimi, skalowalnymi i niezależnymi od rozdzielczości.

Wybierz typ wzoru z menu rozwijanego, a następnie dostosuj kolor pierwszego planu, kolor tła i rozmiar wzoru za pomocą kontrolek. Obszar podglądu aktualizuje się w czasie rzeczywistym, abyś mógł dokładnie zobaczyć, jak wygląda Twój wzór. Gdy będziesz zadowolony, kliknij przycisk Kopiuj, aby skopiować wygenerowany kod CSS do schowka.

Dostępnych jest pięć typów wzorów: Kropki (powtarzający się wzór kółek używający radial-gradient), Siatka (krzyżowa siatka używająca dwóch warstw linear-gradient), Ukośne (ukośne linie pod kątem 45 stopni używające repeating-linear-gradient), Zygzaki (wzór zygzakowy używający czterech warstw linear-gradient) i Fale (falisty wzór używający przesuniętych kół radial-gradient).

Użyj wybieraka koloru pierwszego planu, aby ustawić kolor linii lub kropek wzoru, oraz wybieraka koloru tła, aby ustawić kolor bazowy za wzorem. Suwak rozmiaru kontroluje odstęp powtarzania wzoru — mniejsze wartości tworzą ciaśniejsze, gęstsze wzory, podczas gdy większe wartości dają bardziej rozstrzelone wzory. Eksperymentuj z różnymi kombinacjami kolorów i rozmiarów.

Skopiowany kod CSS można wkleić bezpośrednio do dowolnego arkusza stylów lub stylu inline. Zastosuj go do dowolnego elementu HTML za pomocą klasy lub stylu inline. Te wzory sprawdzają się dobrze w tłach sekcji, akcentach kart, obszarach hero i dekoracyjnych separatorach. Ponieważ są czystym CSS-em, nie dodają dodatkowych żądań HTTP i idealnie skalują się na wszystkich gęstościach ekranu.