Tärkeimmät kohdat
- 01Kaikki kolme CSS-gradienttityyppiä — lineaarinen, radiaalinen ja kartiomainen — ovat tuettuja reaaliaikaisen esikatselun kanssa.
- 02Lisää jopa kuusi väripysähdystä, joilla jokaisella on itsenäinen sijainti ja väri.
- 03Lähtötieto on valmis tausta-julistus, joka on valmis liitettäväksi mihin tahansa tyylisäädöstöön.
- 04Ei kirjautumista, ei asennusta ja mitään ei ladataan — kaikki toimii selaimessasi.
Miksi käyttää visuaalista gradientti-generaattoria?
CSS-gradienttien kirjoittaminen käsin käy nopeasti tylsäksi. Syntaksi on luettava kun sen tunnet, mutta tarkkojen pysähdyspaikkojen ja värien valitseminen ilman visuaalista esikatselu kääntyy yksinkertaiseksi suunnittelupäätökseksi kokeiluseikkailu kehitystyökaluja käyttäen. Generaattori antaa sinun nähdä tuloksen reaaliajassa ja viedä puhtaan koodin heti kun se näyttää oikealta.
Tämä työkalu tukee kaikkia kolmea modernia gradienttityyppiä. Lineaarinen on klassinen suuntaava sekoitus, jota käytät sankarien taustoissa ja painikkeissa. Radiaalinen leviää pisteestä ulos — hyvä kohdevalaistusefekteille ja vignetteille. Kartiomainen pyörii keskipisteen ympäri, joten se on ensisijainen piirakkakaavioiden segmenteille, väripyöreille ja pyörimisindikaattoreille. Aloita yhdestä sisäänrakennetuista esiasetuksista (Lime Swiss, Sunset, Sky, Aurora) tai suunnittele alusta alkaen.
CSS-gradientin generointi
Koko prosessi kestää alle minuutin.
- 01
Valitse gradienttityyppi
Valitse Lineaarinen, Radiaalinen tai Kartiomainen tyypin valitsimesta. Lineaariselle aseta myös kulma. Esikatselu päivittyy välittömästi.
- 02
Lisää ja sijoita väripysähdykset
Klikkaa Lisää pysähdys uuden pysähdyksen lisäämiseksi, vedä sitten sen liu'utinta tai kirjoita prosenttiluku sen sijoittamiseksi. Jopa kuusi pysähdystä ovat tuettuja — pysähdykset lajitellaan uudelleen sijainnin mukaan automaattisesti.
- 03
Valitse jokaisen pysähdyksen väri
Klikkaa värinäytettä järjestelmän värinvalitsin avaamista varten tai kirjoita heksadesimaaliarvo suoraan. Sekä RGB että heksadesimaaliformaatit toimivat.
- 04
Esikatsele reaaliajassa
Esikatselu-paneeli esittää gradienttisi selaimen alkuperäisellä gradientti-moottorilla, joten tulos vastaa täsmälleen sitä, mitä CSS tuottaa tuotannossa.
- 05
Kopioi CSS-julistus
Klikkaa Kopioi saadaksesi täydellisen background: linear-gradient(...) -julistuksen. Liitä se tyylisäädöstöön, tyylin komponenttiin tai Tailwind mielivaltaisen arvon kuten bg-[<value>] -arvoon.
Yleiset gradientti-käyttötapaukset
Jokainen gradienttityyppi on erinomainen eri tilanteissa.
- 01Sankari-osion taustat — lineaarinen gradientti 135°:ssa modernille diagonaalille.
- 02Painikkeen pitäytymisen tilat — hienovarainen kahden pysähdyksen lineaarinen gradientti syvyydelle.
- 03Radiaalinen kohdevalaistus tai vinjetti — tumma-läpinäkyvä radiaalinen kuvan päälle.
- 04Piirakkakaaviot ja edistysrengas — kartiomainen gradientti kovilla pysähdyksillä.
- 05Väripyörä-valitsin esikatselu — täysspektri-kartiomainen gradientti.
- 06Teksti-gradientit — sovella gradientti taustaan, käytä sitten background-clip: text.
Suoritetaan kokonaan selaimessasi
Gradientti-generaattori toimii 100 % asiakaspuolisesti — mitään tietoja ei lähetetä millekään palvelimelle. Esikatselu hahmontuu selaimen omalla CSS-moottorilla, mikä tarkoittaa, että näkemäsi vastaa sitä, mitä kaikkien vierailijoiden selaimet näyttävät samalla CSS:llä.
Yksi käytännöllinen huomio: sähköpostiasiakkaat silti heikon tuen CSS-gradientiille. Jos liität luodun CSS:n HTML-sähköpostitemplatehin, lisää kiinteä background-color tausta ennen gradientti-julistusta, jotta vastaanottajat vanhemmissa asiakkaissa näkevät jotain järkevää.
CSS-gradientti generaattori — UKK
Mitä eroa on lineaarisella, radiaaalisella ja kartiomaisen gradientti välillä?
Lineaariset gradientit siirtyvät suoraa linjaa pitkin tietyssä kulmassa. Radiaalit gradientit leviävät keskipisteestä — hyödyllisiä kohokohdille ja paikka-efekteille. Kartiomaisia gradientteja pyörivät keskipisteen ympäri kuin kellon osoittimet — ihanteellisia piirakkaosille ja värivälineille.
Voinko käyttää tätä Tailwind CSS -projekteissa?
Kyllä. Kopioi luodun arvon ja käytä sitä Tailwind mielivaltaisena arvona, esimerkiksi: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind sisältää sen lähtötyylisäädöstöön.
Vastaaako esikatselu täsmälleen sitä, mitä näen live-sivustolla?
Kyllä — esikatselu hahmontuu samalla selaimen gradientti-moottorilla, joka esittää live-CSS:ää, joten lähtötieto on pikseliä tarkka.
Voinko käyttää CSS-gradientteja sähköpostisäädöissä?
Useimmat sähköpostiasiakkaat eivät tue CSS-gradientteja luotettavasti. Lisää aina kiinteä background-color ennen gradientti-julistusta varasuunnitelmaksi.
Onko väripysähdysten määrässä rajoitus?
Generaattori tukee jopa kuutta pysähdystä. Useimmissa suunnitelmissa kaksi neljään riittää; yli kuusi pyrkii vähentämään selkeyttä rikkaamman sijasta.