Handytool
KehittäjilleIlmainenSuoritetaan paikallisesti

CSS Gradient -generaattori

Rakenna ja vie lineaarisia ja säteittäisiä gradientteja mukautetuilla värin pysähdyksillä.

Esikatselu
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Tyyppi
Esiasetukset

Lisää jopa kuusi värin pysäytystä, vedä asentoa ja kopioi CSS.

CSS Gradient -generaattori – tietoa

Handytooling gradient -generaattori sallii värien yhdistämisen lineaarisiksi, säteittäisiksi ja kartiomaisiksi gradienteiksi. Lisää ja muokkaa värin pysähdyksiä, säädä kulmaa ja sijaintia, ja esikatsele hetki elementillä, jonka koko vaihtelee. Vie täydellinen CSS-ominaisuus, valmis tuotantoon, suuntasanojen (to right, to bottom) ja astetuen tukemisella.

CSS Gradient -generaattori – ominaisuudet

  • 01

    Vapaat värin pysähdykset

    Lisää niin monta väriä kuin haluat ja säädä jokaisen sijaintia liukusäätimellä. Luo automaattisesti lineaarisen jakauman, jos et muuten määritä.

  • 02

    Gradientit: lineaarinen, säteittäinen, kartiomainen

    Vaihda lineaarisen (yksi suunta), säteittäisen (keskipisteestä) ja kartiomaisen (pisteen ympäri pyöriminen) välillä kaikille kuviteltaville tehoille.

  • 03

    Esikatselu oikealla elementillä

    Katso gradienttia nelikulmiolla (tai muulla kuvasuhteella) millä tahansa toissijaisen taustan kanssa kontrasti- ja luettavuuden testaamiseksi.

CSS Gradient -generaattori – UKK

Mitkä ovat suuntasanat?
Käytä to right, to bottom, to bottom right jne. lineaarisille gradienteille. Astetut kulmat (45deg) toimivat myös.
Kuinka sijoitan pysähdykset?
Jokaisella pysähdyksellä on sijainti (0% - 100%). 0% on alku, 100% on loppu. Automaattinen interpolointi täyttää välit.
Säteittäinen gradientti - mitä position tekee?
Sijainti (center, top, jne.) asettaa, missä säteily alkaa. Muoto (ympyrä vs ellipsi) ja koko hallitsevat kuinka gradientti leviää.
Voinko käyttää CSS-muuttujia?
Kyllä. Kopioi luotu CSS ja korvaa värit var(--my-color):lla uudelleenkäytettäville komponenteille teemoituksella.

Oppaat

Artikkelit →

Liittyvät työkalut

Kehittäjille →

Tutustu muihin työkaluihin

Kaikki työkalut →