CSS-taustakuviogeneraattori

Tämä työkalu luo toistuvia taustakuvioita käyttäen pelkästään CSS-liukuvärejä — kuvatiedostoja ei tarvita. Valitse pilkkukuvio, viistoraidat, shakkilauta tai ruudukkoviivat, säädä värejä ja välejä, ja kopioi background-image-CSS suoraan tyylitiedostoosi.

Mikä tämä työkalu on?

CSS voi piirtää toistuvia kuvioita ilman kuvatiedostoja käyttämällä liukuvärejä — radial-gradient() ja linear-gradient() — taustakuvana yhdistettynä elementtiä pienempään background-size-arvoon, jolloin liukuväri asettuu ruudukoksi ja toistuu. Pilkkukuviot käyttävät toistuvaa radial-gradient()-liukuväriä, raidat ja shakkilaudat toistuvaa tai kerrostettua linear-gradient()-liukuväriä, ja ruudukkoviivat kahta päällekkäistä linear-gradient()-viivaa.

Tämä työkalu rakentaa nämä liukuväri-määritykset puolestasi. Valitse kuviotyyppi, säädä kuvion väriä, taustaväriä ja välejä, ja katso live-esikatselun päivittyvän — kopioi sitten tarkka background-image- ja background-size-CSS.

Lähde: CSS Images Module Level 3, W3C — määrittelee repeating-linear-gradient()- ja repeating-radial-gradient()-funktiot, joista nämä kuviot rakennetaan.

Miksi käyttää sitä?

Ei kuvatiedostoja, ei HTTP-pyyntöjä — kuvio on puhdasta CSS:ää ja renderöityy välittömästi missä tahansa resoluutiossa, myös retina-/korkean DPI:n näytöillä.
Täysin säädettävä väri ja välit ilman käsin kirjoitettua liukuvärisyntaksia tai laattamatematiikan laskemista.
Live-esikatselu näyttää tarkan toistuvan kuvion ennen kuin kopioit mitään.
Skaalautuu siististi, koska kyseessä on vektorimatematiikka, ei rasterikuva — ei sumentumista elementin koon muuttuessa.
Toimii kokonaan selaimessasi — mitään määrittämääsi ei ladata minnekään.
Ilmainen, ei rekisteröitymistä, toimii mobiilissa.

Käyttöohje

Valitse kuviotyyppi: pilkkukuvio, viistoraidat, shakkilauta tai ruudukkoviivat.
Valitse kuvion väri ja taustaväri, joka näkyy kuvion muotojen välissä/takana.
Säädä kokoliukusäädintä tehdäksesi pisteistä, raidoista tai ruudukon soluista suurempia tai pienempiä — tämä hallitsee myös sitä, kuinka tiheästi kuvio toistuu.
Kopioi luotu CSS ja liitä se minkä tahansa elementin background-image-arvoksi (ja background-size/background-position-arvoiksi, jos näytetään).

Esimerkki

Syöte

Kuvio: pilkkukuvio · Väri: sininen · Tausta: valkoinen · Koko: 24px

Tuloste

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

Klassinen vaalea pilkkukuvio, jota käytetään usein hienovaraisena osion taustana tai korttitekstuurina.

Miten kukin kuvio rakennetaan

Pilkkukuvio: radial-gradient() piirtää yhden pienen täytetyn ympyrän, ja sitten background-size saa sen toistumaan pisteiden ruudukkona.
Viistoraidat: 45 asteen kulmassa oleva repeating-linear-gradient() vuorottelee kuvion värin ja taustavärin välillä kiinteällä välillä.
Shakkilauta: kaksi päällekkäistä 45 asteen linear-gradient()-kerrosta, siirrettynä toisistaan puolella laatan verran, tuottavat vuorottelevat vaaleat/tummat ruudut.
Ruudukkoviivat: kaksi ohutta linear-gradient()-viivaa — yksi vaakasuora, yksi pystysuora — toistettuna valitulla välillä ruudukoksi, samaan tapaan kuin ruutupaperi.

Milloin käyttää CSS-kuvioita kuvatiedostojen sijaan

CSS-liukuvärikuviolla ei ole tiedostokokoa eikä HTTP-pyyntöä, joten se latautuu välittömästi eikä koskaan näytä sumealta korkean DPI:n näytöillä, toisin kuin rasterimuotoinen PNG-taustalaatta. Se sopii ihanteellisesti hienovaraisiksi tekstuureiksi tekstin taakse, osioiden erottimiksi, tyhjän tilan kuvituksiksi tai paikkamerkkikorteiksi. Monimutkaisia kuvitettuja tai valokuvamaisia kuvioita varten oikea kuva on edelleen oikea työkalu — CSS-liukuvärit sopivat parhaiten yksinkertaisiin, geometrisiin, toistuviin muotoihin, kuten tässä esitettyihin.

Yhdistäminen muihin CSS-tehosteisiin

Kuviot toimivat hyvin taustana lasimorfismikorttien takana, koska sumennus tarvitsee näkyäkseen jotain visuaalisesti tekstuurista taustallaan. Ne sopivat myös luonnollisesti yhteen säiliöelementin pyöristettyjen kulmien kanssa.

→ CSS-lasimorfismigeneraattori · Border Radius -generaattori

Usein kysytyt kysymykset

Vaativatko nämä kuviot kuvatiedostoja?

Ei. Jokainen tämän sivun kuvio luodaan puhtaasti CSS-liukuväreillä taustakuvana — mukana ei ole PNG-, SVG- tai muuta tiedostoa, joten ei ylimääräistä HTTP-pyyntöä eikä sumentumisriskiä korkean resoluution näytöillä.

Voinko muuttaa kuvion kokoa?

Kyllä — kokoliukusäädin hallitsee background-size-arvoa, joka määrittää, kuinka suuri yksi kuvion toistuva laatta on. Pienempi koko pakkaa pisteet, raidat tai ruudukon solut lähemmäs toisiaan; suurempi koko levittää ne kauemmas.

Miksi shakkilautakuvio käyttää kahta liukuväriä?

Yksittäinen linear-gradient() voi vuorotella värejä vain yhteen suuntaan. Kahden 45 asteen liukuvärin kerrostaminen, siirrettynä toisistaan puolella laatan verran, on se, mikä tuottaa shakkilaudan vuorottelevat vaaleat/tummat ruudut — tämä on vakiotekniikka pelkkää CSS:ää käyttäville shakkilaudoille.

Näyttääkö tämä kuvio terävältä retina-/korkean DPI:n näytöillä?

Kyllä. Koska kuvio on matemaattinen liukuväri eikä bittikarttakuva, se renderöityy missä tahansa resoluutiossa näyttö tarvitsee, ilman ylösskaalausta tai sumentumista — toisin kuin pieni rasterikuvalaatta, joka on venytetty tai toistettu korkealla pikselitiheydellä.

Voinko käyttää näitä kuvioita koko sivun taustana?

Kyllä — käytä luotua background-image-, background-size- ja background-position-arvoa (jos näytetty) body-elementtiin tai mihin tahansa täysleveään säiliöelementtiin. Pidä kontrasti mielessä: sekava, korkeakontrastinen kuvio leipätekstin takana voi heikentää luettavuutta, joten kevyemmät/hienovaraisemmat asetukset toimivat yleensä paremmin suurilla taustaalueilla.