CSS Liukuvärigeneraattori
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Miksi käyttää visuaalista liukuvärigeneraattoria?
CSS-liukuväreinten kirjoittaminen käsin on hankalaa. Visuaalisella generaattorilla voit hallita väripysäkkejä värinvalitsimella ja sijaintiliukusäätimillä reaaliaikaisella päivityksellä.
3 liukuvärityyppiä
Lineaarinen, säteittäinen ja kartiomainen liukuväri — jokaiselle tyypille omat hallintaelementit
Moniväriset liukuvärit
Lisää rajaton määrä väripysäkkejä ja vedä positioita monimutkaisia liukuvärejä varten
Reaaliaikainen esikatselu
Näe liukuvärin renderöinti reaaliajassa kun säädät värejä, sijainteja ja kulmaa
CSS-liukuvärin luominen 3 vaiheessa
Valitse liukuvärityyppi
Valitse lineaarinen, säteittäinen tai kartiomainen liukuväri ja säädä kulma tai suunta
Säädä väripysäkkejä
Aseta kunkin pysäkin väri värinvalitsimella ja asemoi liukusäätimillä
Kopioi CSS
Napsauta 'Kopioi CSS' saadaksesi täydellinen background-ominaisuus käytettäväksi tyylitiedostossasi
CSS-liukuväreinten käyttötapaukset
Hero-osion taustat
Luo vaikuttavia koko näytön taustoja diagonaalisilla tai säteittäisillä liukuväreinteillä
Liukuvärinen teksti
Käytä liukuväriä tekstiin background-clip:text -ominaisuudella upeita tekstitehosteita varten
Liukuväriset reunat
Käytä liukuväriä border-image -ominaisuuden kanssa luodaksesi värikkäitä kehyksiä elementeille
Kuvan peitto
Aseta liukuväri kuvien päälle tumman peiton luomiseksi tekstin luettavuuden varmistamiseksi
CSS-liukuväreinten parhaat käytännöt
✓ Käytä 135deg diagonaalisille liukuväreinteille
135 asteen kulma luo klassisen diagonaalin vasemmasta yläkulmasta oikeaan alakulmaan.
✓ Pidä liukuvärit hienovaraisina käyttöliittymässä
Käyttöliittymäelementeissä, kuten painikkeissa ja korteissa, käytä hyvin hienovaraisia liukuvärejä 10-20% kirkkauserolla syvyyttä varten.
✓ Määritä varaväri
Lisää tasainen taustaväri varaväriksi ennen liukuväriä: background-color:#6366f1; background:linear-gradient(...).
✓ Animoi liukuvärin sijaintia
Et voi animoida CSS-liukuvärejä suoraan, mutta voit animoida background-position -ominaisuutta suuremmalla liukuvärillä sileää liikettä varten.
❓ Usein kysytyt kysymykset
Mikä on ero lineaarisen, säteittäisen ja kartiomaisen liukuvärin välillä?
Lineaarinen liukuväri siirtyy suoraa viivaa pitkin kulmassa. Säteittäinen säteilee keskipisteestä ympyränä tai ellipsinä. Kartiomainen kiertää keskipistettä — ihanteellinen pyöreille edistymisindikaattoreille.
Miten luodaan läpinäkyvä liukuväri?
Käytä transparent väripysäkinä: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Se luo liukuvärin puoliläpinäkyvästä väristä täysin läpinäkyvään — ihanteellinen kuvapeittoon.
Miksi näen raidoitusta liukuvärissäni?
Raidoitus (näkyvät viivat värien välillä) syntyy heikkolaatuisilla näytöillä tai siirtymissä samankaltaisten sävyjen välillä. Lisää välipysäkki siirtymän pehmentämiseksi.
Voiko liukuväriä käyttää reunana?
Kyllä; käytä border-image:linear-gradient(...) 1 -ominaisuutta. Vaihtoehtoisesti voit käyttää ::before pseudo-elementtiä, jossa on liukuvärinen tausta ja negatiivinen z-index liukuvärisenreunauksen simuloimiseksi.