CSS-gradienttigeneraattori
Rakenna CSS-gradienteja visuaalisesti: lineaarinen, radiaalinen tai kartiomainen tyyppi, kulmaliukusäädin ja jopa kuusi väripysäkkiä live-täysleveällä esikatselulla ja kopioitavalla koodilla.
🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.
Tulos
Linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) kirjoittaminen käsin ja sivun lataaminen sen nähdäkseen on hidas kehä. Tämä generaattori sulkee sen: valitse lineaarinen, radiaalinen tai kartiomainen, vedä kulmaliukusäädintä, aseta jokainen väripysäkki natiivilla värivalitsimella ja prosenttisijainnilla – ja täysleveä esikatselu päivittyy jokaisella yksittäisellä syötteellä, valmiin taustarivin ollessa aina kopioitavissa.
Kolme gradienttityyppiä kattavat eri tehtävät. Lineaariset gradientit häivyttävät suuntaan ja kannattelevat useimpia hero-osioita ja painikkeita; radiaaliset gradientit säteilevät keskustasta hehkuja ja vinjettejä varten; kartiomaiset gradientit pyyhkäisevät keskustan ympäri ja käyttävät voimaa piirakkakaavioihin ja väripyöriin. Voit vaihtaa tyyppiä milloin tahansa – pysäkkisi säilyvät, joten kolmen vertailu vie sekunteja.
Jopa kuusi väripysäkkiä antavat tilaa monivyöhykesuunnittelulle, ja esiasetussivut tarjoavat todistetusti toimivia yhdistelmiä – lämpimän auringonlaskun, rauhallisen valtameren ja pehmeän pastelliparin – lähtökohdiksi, joita voit hienosäätää tyhjien pohjien sijaan. Huomaa työnjako: tämän sivuston väripalettigeneraattori poimii harmonisia litteitä värejä ja värimuotokonvertteri kääntää arvon HEX-, RGB- ja HSL-muotojen välillä, kun taas tämä työkalu tekee eri työn – se muuttaa valitut värit valmiiksi CSS-gradienttikoodiksi.
Kaikki toimii paikallisesti selaimessasi: ei latauksia, ei tiliä, ei palvelimen edestakaisia matkoja, ja generaattori jatkaa toimintaansa offline-tilassa, kun se on kerran ladattu.