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

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

CSS-laddningsgenerator

Skapa en cirkulär spinnare i ren CSS: ställ in diameter, kanttjocklek, accentfärg och rotationshastighet, förhandsvisa direkt och kopiera den färdiga CSS-koden. Ingen SVG, ingen JavaScript.

OpenAPI-validerare

Klistra in ett OpenAPI- eller Swagger-dokument i JSON eller YAML och kontrollera dess kärnstruktur: versionsfält, info-objekt och paths, med tydliga fel och varningar.

PHP-formaterare

Lägg till radbrytningar och indrag med 2 eller 4 blanksteg i ett enkelt PHP-kodstycke. Granska resultatet: detta är varken en PHP-parser eller en PSR-12-korrigerare.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

Verktyget finns på andra språk