CSS Bakgrunnsmønster-generator

Dette verktøyet genererer repeterende bakgrunnsmønstre ved hjelp av kun CSS-gradienter — ingen bildefiler nødvendig. Velg polkaprikker, diagonale striper, et sjakkbrett eller rutenettlinjer, juster farger og avstand, og kopier background-image-CSS-en rett inn i stilarket ditt.

Hva er dette verktøyet?

CSS kan tegne repeterende mønstre uten noen bildefiler ved å bruke gradienter — radial-gradient() og linear-gradient() — som en background-image, kombinert med en background-size som er mindre enn elementet slik at gradienten flislegges og gjentas. Polkaprikker bruker en repeterende radial-gradient, striper og sjakkbrett bruker repeterende eller lagdelte linear-gradient(), og rutenettlinjer bruker to overlappende linear-gradient()-linjer.

Dette verktøyet bygger disse gradient-deklarasjonene for deg. Velg en mønstertype, juster mønsterfargen, bakgrunnsfargen og avstanden, og se den live forhåndsvisningen oppdateres — kopier deretter den nøyaktige background-image- og background-size-CSS-en.

Kilde: CSS Images Module Level 3, W3C — definerer repeating-linear-gradient() og repeating-radial-gradient(), funksjonene disse mønstrene bygges av.

Hvorfor bruke det?

Ingen bildefiler, ingen HTTP-forespørsler — mønsteret er ren CSS og rendres umiddelbart i enhver oppløsning, inkludert retina-/høy-DPI-skjermer.
Fullt justerbar farge og avstand uten å skrive gradient-syntaks eller regne ut flisleggingsmatte for hånd.
Live forhåndsvisning viser det nøyaktige repeterende mønsteret før du kopierer noe.
Skalerer helt rent siden det er vektormatematikk, ikke et rasterbilde — ingen uskarphet når elementet endrer størrelse.
Kjører helt i nettleseren din — ingenting du konfigurerer lastes opp noe sted.
Gratis, ingen registrering, fungerer på mobil.

Slik bruker du det

Velg en mønstertype: polkaprikker, diagonale striper, sjakkbrett eller rutenettlinjer.
Velg mønsterfargen og bakgrunnsfargen som vises mellom/bak mønsterformene.
Juster størrelsesskyveren for å gjøre prikkene, stripene eller rutenettcellene større eller mindre — dette styrer også hvor tett mønsteret gjentas.
Kopier den genererte CSS-en og lim den inn som background-image (og background-size/background-position der det vises) på et hvilket som helst element.

Eksempel

Inndata

Mønster: polkaprikker · Farge: blå · Bakgrunn: hvit · Størrelse: 24px

Resultat

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Et klassisk lyst polkaprikk-mønster som ofte brukes som en diskré seksjonsbakgrunn eller korttekstur.

Hvordan hvert mønster er bygget opp

Polkaprikker: en radial-gradient() tegner én liten fylt sirkel, deretter får background-size den til å gjenta seg som et flislagt rutenett av prikker.
Diagonale striper: en repeating-linear-gradient() i 45 graders vinkel veksler mellom mønsterfargen og bakgrunnsfargen med et fast intervall.
Sjakkbrett: to overlappende 45-graders linear-gradient()-lag, forskjøvet fra hverandre med en halv flis, gir vekslende lyse/mørke ruter.
Rutenettlinjer: to tynne linear-gradient()-linjer — én horisontal, én vertikal — flislagt med valgt avstand for å danne et rutenett, i likhet med rutepapir.

Når du bør bruke CSS-mønstre fremfor bildefiler

Et CSS-gradientmønster har ingen filstørrelse og krever ingen HTTP-forespørsel, så det lastes umiddelbart og blir aldri uskarpt på høy-DPI-skjermer, i motsetning til en rasterbasert PNG-bakgrunnsflis. Det er ideelt for diskré teksturer bak tekst, seksjonsskillere, tomme tilstander eller plassholderkort. For komplekse illustrerte eller fotografiske mønstre er et faktisk bilde fortsatt riktig verktøy — CSS-gradienter egner seg best til enkle, geometriske, repeterende former som de her.

Kombinere med andre CSS-effekter

Mønstre fungerer godt som bakgrunn bak glassmorfisme-kort, siden uskarpheten trenger noe med visuell tekstur bak seg for å være synlig. De passer også naturlig sammen med avrundede hjørner på containerelementet.

→ CSS Glassmorphism-generator · Border Radius-generator

Ofte stilte spørsmål

Krever disse mønstrene noen bildefiler?

Nei. Hvert mønster her genereres utelukkende med CSS-gradienter som en background-image — det finnes ingen PNG, SVG eller annen fil involvert, så det blir ingen ekstra HTTP-forespørsel og ingen risiko for uskarphet på høyoppløselige skjermer.

Kan jeg endre hvor stort mønsteret er?

Ja — størrelsesskyveren styrer background-size, som setter hvor stor én repeterende flis av mønsteret er. En mindre størrelse pakker prikkene, stripene eller rutenettcellene tettere sammen; en større størrelse sprer dem ut.

Hvorfor bruker sjakkbrett-mønsteret to gradienter?

En enkelt linear-gradient() kan bare veksle farger langs én retning. Å legge to 45-graders gradienter oppå hverandre, forskjøvet fra hverandre med en halv flis, er det som gir de vekslende lyse/mørke rutene i et sjakkbrett — dette er standardteknikken for rene CSS-sjakkbrett.

Ser dette mønsteret skarpt ut på retina-/høy-DPI-skjermer?

Ja. Fordi mønsteret er en matematisk gradient og ikke et rasterbilde, rendres det i den oppløsningen skjermen trenger, uten oppskalering eller uskarphet — i motsetning til en liten rasterbasert bildeflis som strekkes eller gjentas ved høy pikseltetthet.

Kan jeg bruke disse mønstrene som bakgrunn for en hel side?

Ja — bruk den genererte background-image, background-size og background-position (der den finnes) på body eller et hvilket som helst container-element i full bredde. Husk kontrasten: et travelt, høykontrast-mønster bak brødtekst kan gå ut over lesbarheten, så lysere/mer diskré innstillinger fungerer vanligvis best for store bakgrunnsområder.