---

Mikä on CSS-liukuväri?

CSS-liukuvärit mahdollistavat kahden tai useamman värin välisten pehmeähköjen siirtymien näyttämisen ilman kuvatiedostoja. Niitä on kolme tyyppiä: linear-gradient (suoraa viivaa pitkin), radial-gradient (säteilevä keskipisteestä) ja conic-gradient (pyörivä keskipisteen ympäri). Liukuvärejä käytetään taustoihin, painikkeisiin, peittokuviin ja koristeellisiin elementteihin.

CSS-liukuvärigeneraattorin käyttö

1. Valitse esiasetus näytteistä tai määritä oma liukuväri.

2. Valitse liukuvärin tyyppi: linear, radial tai conic.

3. Säädä kulmaa (linear/conic) tai muotoa (radial).

4. Muokkaa väripisteitä — vaihda värejä ja sijainteja (0–100%).

5. Lisää tai poista väripisteitä tarpeen mukaan.

6. Kopioi CSS ja liitä se tyylitaulukkoon.

Usein kysytyt kysymykset

Kuinka luon läpinäkyvän gradientin? Käytä rgba() tai hsla() väriarvoja alfa-kanavan ollessa 0 täydellisen läpinäkyvyyden saavuttamiseksi. Esimerkiksi väripysäkki rgba(0,0,0,0) on täysin läpinäkyvä musta, hyödyllinen kuvien fade-out-peittokuviin.

Kuinka luon jyrkkään väripysäkin (ilman siirtymää)? Aseta kaksi väripysäkkiä samaan paikkaan — yksi loppuu ja yksi alkaa siinä pisteessä. Esimerkiksi punainen 50%, sininen 50% luo välittömän siirtymisen punaisen ja sinisen välille puolipisteessä ilman gradientin siirtymää.

Mitkä selaimet tukevat kartiomaisia gradientteja? Kartiomaiset gradientit ovat tuettuja kaikissa moderneissa selaimissa (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Ne eivät ole tuettuja Internet Explorerissa.

Voinko käyttää useita gradientteja samassa elementissa? Kyllä. CSS background hyväksyy pilkulla erotetun listan kerroksia. Voit pinota gradientteja, yhdistää niitä taustakuviin ja hallita jokaisen kerroksen paikkaa ja kokoa itsenäisesti.

Keywords: CSS liukuvärigeneraattori, lineaarinen liukuväri, radiaalinen liukuväri, kartimainen liukuväri, CSS taustan generaattori, liukuvärin värinvalitsin, CSS gradient työkalu