Softonic

Generator tekstury szumu

Krok 1 / 2
Dalej

Odrobina szumu ukrywa banding, zmiękcza płaskie wypełnienia kolorem i sprawia, że gradienty w interfejsie przestają być sterylne. Ten generator tworzy kwadratową teksturę szumu, która kafelkuje się bez widocznych szwów, przy użyciu filtra SVG feTurbulence. Ustawisz w nim kolor tła, krycie szumu, częstotliwość ziarna i rodzaj szumu, a na wyjściu dostaniesz gotowy CSS: kolor tła plus osadzony identyfikator data URI z SVG, który wklejasz prosto do arkusza stylów.

Jak wygenerować teksturę szumu

  1. 1

    Wybierz kolor tła

    Ziarno nakłada się na ten kolor, więc zacznij od powierzchni, której naprawdę zamierzasz użyć.

  2. 2

    Ustaw krycie

    Od ledwo widocznego (2-5%) po mocne ziarno filmowe (25% i więcej). W interfejsach lepiej sprawdza się subtelność.

  3. 3

    Dobierz częstotliwość

    Wyższa częstotliwość bazowa daje drobne, gęste ziarno; niższa tworzy większe i bardziej miękkie plamy.

  4. 4

    Wybierz rodzaj szumu

    Szum fraktalny jest miękki i naturalny. Turbulencja daje wyższy kontrast i chmurzasty rysunek.

  5. 5

    Skopiuj CSS

    Wynikiem jest kolor tła oraz osadzony data URI z SVG, gotowy do wklejenia w arkuszu stylów.

Szum w SVG za pomocą feTurbulence

Najlżejszy sposób na szum to SVG i filtr turbulencji:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#n)" opacity="0.3" />
</svg>

Osadź go jako background-image: url("data:image/svg+xml,..."), a otrzymasz kilkaset bajtów kodu, który kafelkuje się na dowolnej powierzchni i nie generuje dodatkowego zapytania HTTP.

Zalecane ustawienia według zastosowania

Zastosowanie Krycie Częstotliwość bazowa Rodzaj szumu
Panele interfejsu w trybie ciemnym 3-5% 0,8-1,0 Szum fraktalny
Warstwa na gradiencie w sekcji hero 5-10% 0,7-0,9 Szum fraktalny
Karta o fakturze papieru 8-15% 0,6-0,8 Szum fraktalny
Zdjęcie z ziarnem filmowym 15-25% 0,9-1,2 Szum fraktalny
Ziarno plakatu retro 25-40% 0,4-0,6 Turbulencja

Uwagi o wydajności

  • W większości przeglądarek turbulencja SVG nie obciąża GPU. Działa w tłach CSS i tanio się przerysowuje.
  • Wykorzystaj jeden kafelek. Generator zwraca kafelek 200 x 200 z stitchTiles="stitch", więc na dużym ekranie powtarza się niepostrzeżenie.
  • Nie animuj szumu. feTurbulence bez zmiany baseFrequency animuje się słabo, a przy dłuższych sesjach wydajność wyraźnie spada.
  • Nakładaj szum na gradienty. Ziarno z kryciem 10% na gradiencie CSS daje o wiele bogatszą powierzchnię niż sam gradient.

Najczęściej zadawane pytania

Zawsze wtedy, gdy duża płaska plama koloru albo gradient wygląda zbyt czysto. Sekcje hero, tła okien modalnych i ciemne panele interfejsu zyskują głębię przy szumie na poziomie 3-10%. Unikaj go pod tekstem, bo pogarsza czytelność.

W filtrze feTurbulence w SVG type="turbulence" daje wartość bezwzględną szumu Perlina (wyższy kontrast, chmurzasty efekt), a type="fractalNoise" zwraca wartości ze znakiem (miększe, bardziej naturalne ziarno). W interfejsach niemal zawsze chcesz szumu fraktalnego.

Nie. Generator zwraca osadzony data URI z SVG o wielkości kilkuset bajtów, wpisany wprost w CSS, więc nie ma pliku graficznego ani dodatkowego zapytania. Do tego skaluje się na dowolną powierzchnię bez utraty jakości.

Tak. Na ekranach o 8 bitach na kanał gradienty przy niskim kontraście potrafią pokazywać widoczne pasy. Warstwa szumu na poziomie 2-3% rozprasza przejście ditheringiem i usuwa pasy zarówno na telefonach, jak i na monitorach.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator EditorConfig

Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.

Walidator adresów e-mail

Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

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