CSS-gradienttien luontityökalu

Luo CSS-gradienttikoodia valitsemalla värit ja kulmat sekä esikatsele samalla

PäivityksetCSS-gradienttigeneraattori lisätty, valitse väri ja kulma koodin luomiseksiNäytä päivitykset

Ominaisuudet

Esikatselu ja koodi päivittyvät samanaikaisesti

Värien ja kulmien muuttuessa ulkoasu ja CSS muuttuvat samanaikaisesti

Tuki lineaarisille, säteittäisille ja kartiomaisen gradienteille

Säädä kulmaa, muotoa ja keskipistettä tarkasti kunkin tyypille

Säädä jopa 10 väriä vetämällä

Värien sijainti säädellään vetämällä palkkia, läpinäkyvyys liukusäätimellä

8 näytettä ja satunnaisesti luodut gradientit

Aloita klassisista väryhdistelmistä tai satunnaisista gradienteista ja hienosäädä

Käyttöohje

Valitse tyyppi

Valitse gradienttin tyyppi: lineaarinen, säteittäinen tai kartiomainen

Valitse värit

Valitse väri värikoodilla tai näytteestä, lisää värit "Lisää väri" -painikkeella ja säädä niiden sijaintia ja läpinäkyvyyttä

Säädä suuntaa

Lineaariselle: säädä kulmaa tai käytä suuntapainikkeita; säteittäiselle ja kartiomaisen: määritä keskipiste

Kopioi koodi

Kopioi yhden rivin CSS "Kopioi" -painikkeella omiin tyylihinteihin

Käyttötapaukset

Herokuvien taustan luominen

Määritä sivun yläosan tai painikkeiden taustavärit kirjoittamatta koodia

Blogikirjoitusten otsikoiden värien valinta

Valitse näytteestä lähin väriyhd istelmä ja muokkaa artikkeleiden otsikkojen taustaa

Valokuvien päälle sijoitettava peitto

Luo puoliläpinäkyvä kerros vähentämällä värin läpinäkyvyyttä valokuvan päälle

Moniväristen gradienttien säätäminen

Säädä kolmen tai useamman värin raja-alueiden sijaintia vetämällä

Perustieto

Lineaarinen, säteittäinen ja kartiomainen – erot

CSS:n gradienteissa on kolme funktiota, joilla värit muuttuvat eri tavoin, ja niitä käytetään kaikki background-ominaisuuksiin.

linear-gradient：linear-gradient on lineaarinen gradientti, jossa väri muuttuu määritetyn kulman mukaista suoraa pitkin.
radial-gradient：radial-gradient on säteittäinen gradientti, jossa väri leviää keskipisteestä ulospäin ympyrän tai ellipsin muotoisesti.
conic-gradient：conic-gradient on kartiomainen gradientti, jossa väri muuttuu myötäpäivään keskipisteen ympärillä.

Kulman ja suuntaavainsanojen vastaavuus

linear-gradientissa 0 astetta tarkoittaa alhaalta ylöspäin suuntautumista ja arvo kasvaa myötäpäivään. Kulmia voi merkitä myös suuntaavainsanoilla kuten "to right"; 90 astetta vastaa "to right" ja 180 astetta "to bottom".

Väripysäkkien ja läpinäkyvyyden kirjoitus

Väripysäkki tarkoittaa gradientissa sitä kohtaa, jossa väri on määritelty; 0 % on aloituspiste ja 100 % loppupiste. Esimerkiksi "#3B82F6 0%, #8B5CF6 100%" tarkoittaa värinvaihdosta sinisestä violetiksi.

#RRGGBB-muoto：#RRGGBB-muoto on värin merkitsemismuoto, jossa punaisen, vihreän ja sinisen intensiteetti merkitään 2-numeroisilla heksadesimaaleilla; #FF0000 tarkoittaa läpinäkymätöntä punaista.
rgba-muoto：rgba-muoto on värin merkitsemismuoto, jossa punaisen, vihreän ja sinisen arvot (0–255) ja läpinäkyvyys (0–1) merkitään; läpinäkyvyys 0,5 tarkoittaa puoliläpinäkyvää väriä.