Softonic

Generator för mönsterbakgrunder

Steg 1 / 3

Välj ett mönster

Varje alternativ skapar ett upprepat mönster av CSS-gradienter, utan någon bildfil.

Mönstertyp

Välj ett motiv, en bakgrundsfärg och en mönsterfärg och ställ in upprepningsavståndet. Generatorn skapar ett upprepat mönster med CSS-gradienter, visar en direkt förhandsvisning och ger dig CSS-kod att kopiera. Resultatet består enbart av CSS-egenskaper som background-color, background-image, background-size och vid behov background-position. Ingen bild eller SVG-fil skapas.

Så genererar du ett mönster

  1. 1

    Välj ett motiv

    Prickar, rutnät, ränder, schackrutor, korsskraffering eller diagonala linjer.

  2. 2

    Ange två färger

    En bakgrundsfärg för fyllningen och en mönsterfärg för formerna som ritas ovanpå.

  3. 3

    Justera avståndet

    Välj 5 px för ett tätt mönster och upp till 80 px för ett glesare mönster.

  4. 4

    Titta på förhandsvisningen

    Panelen uppdateras direkt när du ändrar motiv, färger och storlek.

  5. 5

    Kopiera CSS-koden

    Ta den genererade CSS-koden och klistra in den på vilket element som helst som dess bakgrund.

Ren CSS, inga bildfiler

Varje mönster här ritas med CSS-gradienter ovanpå en enfärgad background-color. Du behöver inte lagra någon separat bild eller göra en extra HTTP-förfrågan för den. Ett prickmönster ser till exempel ut så här:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
}

CSS-koden upprepar motivet över hela bakgrunden. Avståndet styr hur tätt mönstret blir, men ändrar inte tjockleken på varje linje eller storleken på varje prick. Vid vissa zoomnivåer eller delar av en enhetspixel kan mycket tunna kanter synas mellan upprepningarna.

Vad varje motiv består av

Motiv Byggt av Bra för
Prickar En upprepande radial-gradient Tech-sidor, instrumentpaneler, modernt UI
Rutnät Två korsande linear-gradient-linjer Rutpapperskänsla, whiteboards, planerare
Ränder En 45-graders repeating-linear-gradient Grafiska accenter, lekfulla avsnitt
Schackrutor Fyra vinklade linear-gradient-lager Retro-UI, transparensliknande bakgrunder
Korsskraffering Två korsade repeating-linear-gradient Skiss- och tryckstextur, redaktionellt
Diagonalt En enda 45-graders repeating-linear-gradient Varningslägen, randiga markiser, sport

Tips för färg och kontrast

  • Håll kontrasten låg för bakgrunder. En mönsterfärg nära bakgrundsfärgen ger ett diskret uttryck. Hög kontrast kan ta uppmärksamhet från innehållet.
  • Matcha ditt varumärke. Använd en varumärkesfärg som mönsterfärg i stället för vanligt grått så att texturen knyts till din identitet.
  • Mörkt läge. Byt till en mörk bakgrundsfärg och en något ljusare mönsterfärg. Mönster med full kontrast ser stökiga ut på mörka ytor.
  • Kontrollera texten mot båda färgerna. Låg kontrast mellan bakgrundsfärgerna garanterar inte tillräcklig kontrast för texten. Testa textfärgen mot både grundfärgen och mönsterfärgen. Verktyget granskar inte WCAG-efterlevnad.

Var du använder det

  • Bakgrunder för sidhuvuden och avsnitt som behöver lite textur utan en bild.
  • Kort och paneler i en instrumentpanel, där ett svagt rutnät eller prickar ger struktur.
  • Tomma lägen och platshållare, där schackrutor ger en välkänd visuell markering.
  • Layouter i trycksstil och bilder som kräver en rutpappers- eller korsskrafferingskänsla.

Eftersom resultatet enbart är CSS behövs ingen separat bildförfrågan. Du kan sedan justera koden i webbläsarens utvecklarverktyg.

Vanliga frågor

Nej. Resultatet är enbart CSS och kan innehålla background-color, background-image, background-size och background-position. Ingen bild eller SVG-fil skapas för nedladdning.

Den genererade CSS-koden upprepar motivet över bakgrunden. Avståndet styr hur tätt mönstret blir. Vid vissa zoomnivåer eller delar av en enhetspixel kan mycket tunna kanter synas.

Ja, men kontrollera textfärgen mot båda färgerna i mönstret. Ett diskret mönster minskar störningar men ersätter inte ett kontrasttest. Verktyget verifierar inte WCAG-efterlevnad.

Färgerna är hexvärden i CSS-koden. Redigera background-color och färgen i gradienten, eller generera mönstret på nytt och kopiera den uppdaterade koden.

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.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

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