Softonic

Generator tła wzorzystego

Krok 1 / 3

Wybierz wzór

Każda opcja tworzy powtarzalny wzór z gradientów CSS, bez pliku obrazu.

Rodzaj wzoru
Dalej

Wybierz motyw, kolor tła i kolor wzoru, a następnie ustaw odstęp powtórzeń. Generator tworzy powtarzający się wzór z gradientów CSS, pokazuje podgląd na żywo i udostępnia kod gotowy do skopiowania. Wynik zawiera wyłącznie właściwości CSS, takie jak background-color, background-image, background-size oraz w razie potrzeby background-position. Narzędzie nie tworzy obrazu ani pliku SVG.

Jak wygenerować wzór

  1. 1

    Wybierz motyw

    Kropki, siatka, paski, szachownica, kreskowanie krzyżowe lub linie ukośne.

  2. 2

    Ustaw dwa kolory

    Kolor tła jako wypełnienie i kolor wzoru dla kształtów rysowanych na wierzchu.

  3. 3

    Ustaw odstęp

    Wybierz 5 px dla gęstego wzoru albo wartość do 80 px dla luźniejszego układu.

  4. 4

    Sprawdź podgląd na żywo

    Panel aktualizuje się natychmiast, gdy zmieniasz motyw, kolory i rozmiar.

  5. 5

    Skopiuj CSS

    Weź wygenerowany CSS i wklej go do dowolnego elementu jako jego tło.

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

Motyw Zbudowany z Dobry do
Kropki Powtarzającego się radial-gradient Stron tech, dashboardów, nowoczesnego UI
Siatka Dwóch przecinających się linii linear-gradient Charakteru papieru milimetrowego, tablic, planerów
Paski 45-stopniowego repeating-linear-gradient Akcentów w stylu słupa fryzjerskiego, żywiołowych sekcji
Szachownica Czterech kątowych warstw linear-gradient Retro UI, teł w stylu przezroczystości
Kreskowanie krzyżowe Dwóch skrzyżowanych repeating-linear-gradient Tekstury szkicu i druku, publicystyki
Ukośne Pojedynczego 45-stopniowego repeating-linear-gradient Stanów ostrzegawczych, pasiastych markiz, sportu

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.

Najczęściej zadawane pytania

Nie. Wynik to wyłącznie CSS, który może zawierać background-color, background-image, background-size i background-position. Narzędzie nie tworzy obrazu ani pliku SVG do pobrania.

Wygenerowany CSS powtarza motyw na całej powierzchni. Odstęp określa gęstość wzoru. Przy niektórych poziomach powiększenia lub ułamkowych pikselach mogą być widoczne bardzo cienkie linie.

Tak, ale sprawdź kolor tekstu na obu kolorach wzoru. Spokojny wzór ogranicza rozpraszanie uwagi, lecz nie zastępuje testu kontrastu. Narzędzie nie weryfikuje zgodności z WCAG.

Kolory są wartościami szesnastkowymi w CSS. Edytuj background-color i kolor w gradiencie albo wygeneruj wzór ponownie i skopiuj zaktualizowany kod.

Powiązane narzędzia

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Walidator XSD

Waliduj dokument XML wobec schematu XSD i zgłaszaj niezgodności elementów i typów z dokładnymi numerami wierszy.

Konwerter liczb szesnastkowych na dziesiętne

Przeliczaj liczby szesnastkowe na dziesiętne (system o podstawie 10). Działa z adresami pamięci, kodami błędów, kanałami RGB oraz liczbami całkowitymi o dowolnej precyzji.

Narzędzie jest dostępne w innych językach