CSS-liukuvärigeneraattori

Näin käytät CSS-liukuvärigeneraattoria

1. Valitse Liukuvärin tyyppi: Lineaarinen, Säteittäinen tai Kartiomainen. Ylhäällä oleva suuri esikatselu päivittyy jokaisen muutoksen mukana.
2. Aseta lineaarisen liukuvärin Kulma liukusäätimellä tai kirjoita se asteina (90° kulkee vasemmalta oikealle, 180° ylhäältä alas). Kartiomaisessa liukuvärissä kulma on kohta, josta pyyhkäisy alkaa.
3. Säteittäisissä ja kartiomaisissa liukuväreissä siirrä keskipistettä kentillä Keskipiste X ja Keskipiste Y. Säteittäinen liukuväri voi olla Ympyrä tai Ellipsi (Muoto-valikko).
4. Muokkaa Värikohtia. Napsauta mitä tahansa kohtaa palkissa lisätäksesi siihen kohdan värillä, joka liukuvärillä on jo siinä kohdassa, tai käytä Lisää kohta täyttääksesi leveimmän aukon. Vedä kahvaa siirtääksesi sitä. Jokaisella kohdalla on myös rivi, jolla voit valita sen värin, kirjoittaa minkä tahansa CSS-värin, asettaa sen Sijainti (%) tai Poista sen (liukuvärissä säilyy vähintään kaksi kohtaa).
5. Valitse halutessasi Toistuva, valitse Värien interpolointi, napsauta Käännä kääntääksesi kohdat tai Satunnainen liukuväri inspiraatioksi.
6. Kopioi tulos kohdasta CSS-koodi painikkeella Kopioi.

Näppäimistö: kohdista palkin kahva ja siirrä sitä nuolinäppäimillä 1 % (Shiftillä 10 %), hyppää päihin Home- ja End-näppäimillä ja poista se Delete-näppäimellä.

Työkalu toimii selaimessasi. Mitään kirjoittamaasi ei lähetetä palvelimelle.

Kolme liukuvärifunktiota

• linear-gradient() sekoittaa värejä suoraa linjaa pitkin. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) kulkee indigosta vasemmalla pinkkiin oikealla. Kulmat mitataan myötäpäivään ylhäältä: 0deg osoittaa ylös, 90deg oikealle.
• radial-gradient() säteilee keskipisteestä. radial-gradient(circle at 30% 40%, …) asettaa keskipisteen 30 % vasemmalta ja 40 % ylhäältä. Ellipsi venyy laatikon mukana, ympyrä pysyy pyöreänä.
• conic-gradient() pyyhkäisee keskipisteen ympäri kuin kellon viisarit. conic-gradient(from 0deg at 50% 50%, …) tekee värikehiä, piirakkakaavioita ja latausindikaattoreita. Kohtien sijainnit ovat osuuksia täydestä kierroksesta.

Toistuva-vaihtoehto käyttää repeating-linear-gradient()-funktiota ja sen sisaria: kohtiesi määrittelemä kuvio toistuu, kunnes laatikko on täynnä. Aseta viimeinen kohta selvästi alle 100 %:n (esimerkiksi 20 %) nähdäksesi raitoja tai renkaita.

Kaksi kohtaa samassa sijainnissa luo terävän reunan sekoituksen sijaan, ja näin tehdään raidat ja liput. Generaattori pitää kohdat koodissa sijainnin mukaan järjestettyinä, kuten CSS vaatii.

sRGB- vai OKLCH-interpolointi

Oletuksena selaimet sekoittavat liukuvärin värit sRGB:ssä. Kahden kylläisen värin, kuten sinisen ja keltaisen, välillä tämä luo usein tylsän harmaan tai mutaisen keskikohdan. CSS Color Level 4 antaa valita interpolointiavaruuden: linear-gradient(90deg in oklch, …) sekoittaa havaintoon perustuvassa OKLCH-avaruudessa ja pitää keskikohdan eloisana.

Kun valitset OKLCH (pehmeämpi, sRGB-varaversiolla), työkalu kirjoittaa kaksi background-määrittelyä: ensin perinteisen sRGB-version ja sitten OKLCH-version. Selaimet, jotka tukevat interpolointiavaruuksia (Chrome ja Edge 111+, Safari 16.2+, Firefox 127+), käyttävät toista riviä. Vanhemmat ohittavat sen ja pitävät ensimmäisen.

Vinkkejä

• Läpinäkyvät värit hyväksytään kohtien kentissä, esimerkiksi #00000080 tai rgb(0 0 0 / 50%), mikä on kätevää kuvien päällä oleviin peittoihin.
• Koodi kirjoitetaan background-ominaisuudella. Käytä sen sijaan background-image-ominaisuutta, jos asetat muut taustaominaisuudet erikseen.
• Hillityt liukuvärit (kaksi lähekkäistä saman värin sävyä) näyttävät yleensä ammattimaisemmilta kuin sateenkaarisekoitukset.