Gradient-syntaksin kirjoittaminen käsin on hankalaa: kulma, pysähdysjärjestys ja prosenttisijainnit vaikuttavat toisiinsa, ja yksikin kirjoitusvirhe rikkoo hiljaa koko background-määrittelyn. Tämä generaattori pitää esikatselun ja koodin täydellisesti synkronissa - se mitä näet on tismalleen sama CSS, jonka kopioit. Kaikki toimii selaimessa, joten mitään suunnittelemaasi ei lähetetä minnekään.
Ilmainen CSS Gradient Generator
Toimii kokonaan selaimessasi - ei lähetyksiä, ei rekisteröitymistä.
Tyyppi
Väripysähdykset
CSS-koodi
Mikä on CSS gradient generator?
CSS gradient generator on visuaalinen työkalu, joka rakentaa linear-gradient()-, radial-gradient()- tai conic-gradient()-koodin puolestasi. Valitse värit, raahaa pysähdyskohtien sijainnit, säädä kulma ja kopioi liitettävä CSS, samalla kun esikatselu näyttää tarkalleen sen mitä selain piirtää. Kaikki tapahtuu selaimessa.
Näin se toimii
- 1Valitse gradienttityyppi. Valitse linear, radial tai conic. Linear näyttää kulmaliukusäätimen; radial lisää muodon (ympyrä tai ellipsi) ja sijainnin; conic sisältää lähtökulman ja sijainnin.
- 2Aseta väripysähdykset. Napsauta kutakin värinäytettä valitaksesi värin ja raahaa sen liukusäädintä siirtääksesi pysähdyksen gradientilla. Lisää jopa 8 pysähdystä tai poista niitä kahteen asti.
- 3Säädä suunta. Raahaa kulmaliukusäädintä (0-360 astetta) tai valitse sijaintiavainsana. Esikatselu päivittyy livenä jokaisella muutoksella.
- 4Kopioi CSS. Paina Kopioi noutaaksesi background-määrittelyn, mukaan lukien yksivärinen fallback-rivi, ja liitä se tyylitiedostoosi.
Kenelle
- Front-end-kehittäjät, jotka tarvitsevat hero-, kortti- tai nappitaustan ja haluavat tarkan
linear-gradient()-rivin ilman syntaksin ulkoa opettelua. - Web- ja UI-suunnittelijat, jotka toistavat mockupin värimaailman: rakenna gradientti visuaalisesti ja anna valmis CSS suoraan kehitystiimille.
- Sähköposti- ja laskeutumissivujen tekijät, jotka tarvitsevat yksivärisen fallback-rivin, jotta ulkoasu näyttää järkevältä vanhoissa sähköpostiohjelmissa - tuloste sisältää sen automaattisesti.
- CSS:ää opettelevat opiskelijat, jotka haluavat nähdä reaaliajassa miten kulma, väripysähdykset ja gradienttityyppi muuttavat lopputulosta.
Usein kysyttyä
Onko tämä CSS gradient generator ilmainen?
Kyllä - täysin ilmainen, ei rekisteröitymistä, ei vesileimoja, ei rajoja. Rakenna niin monta gradienttia kuin haluat ja kopioi CSS suoraan projektiisi.
Lähetetäänkö mitään palvelimelle?
Ei. Gradientti rakennetaan ja esikatsellaan kokonaan selaimessasi tavallisella JavaScriptillä. Värejä, koodia tai käyttödataa ei lähetetä minnekään.
Mikä on ero linear-, radial- ja conic-gradienttien välillä?
Linear-gradientti sekoittaa värit suoraa linjaa pitkin valitsemassasi kulmassa. Radial-gradientti säteilee ulospäin keskipisteestä ympyränä tai ellipsinä. Conic-gradientti pyyhkäisee värit keskipisteen ympäri, kuten värikiekko tai piirakkakaavio.
Miten väripysähdykset toimivat CSS-gradienteissa?
Jokainen pysähdys yhdistää värin sijaintiin 0-100 prosentin välillä gradienttilinjalla. Selain sekoittaa naapuripysähdysten välin pehmeästi. Kahden pysähdyksen asettaminen samaan sijaintiin luo terävän reunan sekoituksen sijaan - hyödyllinen raidoissa ja piirakkakaavioefekteissä.
Mitkä selaimet tukevat näitä gradientteja?
Kaikki modernit selaimet - Chrome, Firefox, Safari ja Edge - tukevat etuliitteetöntä linear-gradient()- ja radial-gradient()-syntaksia; conic-gradient() on tuettu kaikkialla vuodesta 2020 lähtien. Kopioitu koodi sisältää myös yksivärisen fallbackin vanhemmille selaimille.
Voinko käyttää luotua gradienttia tekstin värinä?
Ei suoraan - gradientit ovat kuvia, eivät värejä. Aseta gradientti tekstielementin background-image-arvoksi ja lisää background-clip: text sekä color: transparent, jolloin gradientti näkyy kirjainten läpi.
Miksi gradientissani näkyy raitoja?
Raitoja ilmestyy, kun kaksi kaukana toisistaan olevaa pysähdystä sekoittuvat samankaltaisten sävyjen pitkällä välillä, mikä paljastaa 8-bittisen väritason. Vähennä sitä lisäämällä välipysähdys, lyhentämällä sekoitusmatkaa tai valitsemalla värit, jotka eroavat myös vaaleudeltaan eikä vain sävyltä.