Softonic

Generator för brustexturer

Steg 1 / 2
Nästa

En nypa brus döljer banding, mjukar upp plana färgytor och gör gränssnittets gradienter mindre sterila. Den här generatorn bygger en kvadratisk brustextur som kaklar sömlöst, med SVG-filtret feTurbulence. Du styr bakgrundsfärg, brusets opacitet, kornfrekvens och brustyp, och får färdig CSS: en bakgrundsfärg plus en inbäddad SVG som data-URI, redo att klistras in i stilmallen.

Så skapar du en brustextur

  1. 1

    Välj bakgrundsfärg

    Kornet läggs ovanpå den här färgen, så utgå från den yta du faktiskt tänker använda.

  2. 2

    Ställ in opaciteten

    Från knappt märkbart (2-5%) till kraftigt filmkorn (25% och uppåt). I gränssnitt vinner det subtila.

  3. 3

    Justera frekvensen

    Högre basfrekvens ger fint och tätt korn, lägre ger större och mjukare fläckar.

  4. 4

    Välj brustyp

    Fraktalt brus är mjukt och naturligt. Turbulens ger högre kontrast och ett molnigt uttryck.

  5. 5

    Kopiera CSS-koden

    Resultatet är en bakgrundsfärg plus en inbäddad SVG som data-URI, redo att klistras in i din stilmall.

SVG-brus med feTurbulence

Det mest kompakta sättet att leverera brus är SVG plus ett turbulensfilter:

<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>

Bädda in det som background-image: url("data:image/svg+xml,...") så får du några hundra byte kod som kaklar över vilken yta som helst, utan någon extra HTTP-förfrågan.

Rekommenderade inställningar per användningsfall

Användningsfall Opacitet Basfrekvens Brustyp
Gränssnittspaneler i mörkt läge 3-5% 0,8-1,0 Fraktalt brus
Lager ovanpå gradient i hero-sektionen 5-10% 0,7-0,9 Fraktalt brus
Kort med papperskänsla 8-15% 0,6-0,8 Fraktalt brus
Foto med filmkorn 15-25% 0,9-1,2 Fraktalt brus
Korn i retroaffisch 25-40% 0,4-0,6 Turbulens

Noteringar om prestanda

  • SVG-turbulens klarar sig utan GPU i de flesta webbläsare. Det fungerar i CSS-bakgrunder och ritas om billigt.
  • Återanvänd en enda bricka. Generatorn ger en bricka på 200 x 200 med stitchTiles="stitch", så den upprepas omärkligt över en stor vy.
  • Undvik att animera brus. feTurbulence animeras dåligt utan att baseFrequency ändras, och prestandan rasar under långa sessioner.
  • Lägg brus ovanpå gradienter. Korn med 10% opacitet ovanpå en CSS-gradient ger en betydligt rikare yta än gradienten ensam.

Vanliga frågor

Så snart en stor plan färgyta eller gradient känns för ren. Hero-sektioner, modalbakgrunder och mörka gränssnittspaneler får djup med 3-10% brus. Undvik det i textytor där det kan försämra läsbarheten.

I SVG-filtret feTurbulence ger type="turbulence" absolutbeloppet av Perlin-bruset (högre kontrast, molnigt), medan type="fractalNoise" ger värden med tecken (mjukare och mer naturligt korn). För gränssnitt är fraktalt brus nästan alltid rätt val.

Nej. Generatorn ger en inbäddad SVG som data-URI på några hundra byte, direkt i CSS-koden, så det finns varken bildfil eller extra förfrågan. Den skalar dessutom till vilken yta som helst utan omsampling.

Ja. Gradienter på skärmar med 8 bitar per kanal kan visa synliga band vid låg kontrast. Ett bruslager på 2-3% dithrar övergången och tar bort banden på både telefoner och bildskärmar.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

E-postvalidator

Validera en e-postadress: RFC 5322-syntaxkontroll, live-slagning av MX-poster samt detaljer om lokal del, domän och längd. Ingen e-post skickas.

EditorConfig-generator

Generera en .editorconfig-fil med dina regler för indragsstil och -storlek, radslut, teckenuppsättning och blanksteg för enhetlig formatering i alla IDE:er och editorer.

HTML-formaterare

Formatera HTML lokalt i webbläsaren med indrag på två eller fyra blanksteg. HTML laddas inte upp eller valideras.

Verktyget finns på andra språk