CSS Gradienttigeneraattori

Tämä CSS-gradienttigeneraattori rakentaa lineaarisia ja säteittäisiä gradientteja hallitsemistasi väripysähdyksistä live-esikatselulla ja liitettäväksi valmiilla taustamäärityksellä. Vedä pysäyttimiä palkkia pitkin, aseta kulma tai muoto, ja CSS päivittyy välittömästi.

Kaikki toimii selaimessasi valitsemillasi väreillä ja asetuksilla, joten mitään ei ladata ja voit kopioida tuloksen ja käyttää sitä offline-tilassa.

Lineaarinen gradientti sekoittaa värejä suoraa linjaa pitkin, ja kulma määrittää suuntansa: 0 astetta osoittaa ylöspäin, 90 astetta osoittaa oikealle, 180 astetta osoittaa alaspäin. Säteittäinen gradientti sulautuu keskustasta ulospäin ympyränä tai ellipsinä.

Molemmat ovat normaaleja CSS-arvoja, jotka on kirjoitettu muodossa linear-gradient() ja radial-gradient(), ja molemmat käyttävät samaa väripysähdysluetteloa, joten tyypin vaihtaminen säilyttää värit ja muuttaa vain niiden leviämistä.

Jokainen väripysäytys on väri, joka on sijoitettu kohtaan 0 % - 100 %. Gradientti sulautuu tasaisesti viereisten pysähdysten välillä, joten pysähdyksen sijainti ohjaa, missä sen väri on huipussaan ja kuinka nopeasti se haalistuu seuraavaan.

Lisää niin monta pysähdystä kuin tarvitset moniväristen liukuvärien rakentamiseen, hienosäädä sekoitusta vetämällä niitä tai pudota uusi pysähdys haluamaasi paikkaan napsauttamalla palkkia. Kaksi pysähdystä on minimi, jonka kaltevuus tarvitsee.

Kopioi luotu koodi ja liitä se minkä tahansa elementin, kuten osion, kortin tai painikkeen, taustaksi. Nykyaikaiset selaimet tukevat lineaarista gradienttia ja säteittäistä gradienttia ilman toimittajan etuliitettä, joten arvo toimii sellaisenaan.

Koska liukuväri on vain arvo, voit myös käyttää sitä missä tahansa taustakuvaa odotettaessa, kerrostaa sen tasaisen värin päälle varana tai käyttää samoja pysähdyksiä lineaarisessa ja säteittäisessä versiossa yhtenäisen ilmeen saamiseksi.