Liukuväri-generaattori

Luo lineaarinen, säteittäinen tai kartiomainen liukuväri, lisää väripisteitä ja aseta suunta, ja kopioi sitten CSS yhdellä klikkauksella.

Liukuvärityyppi
Väripisteet
CSS
Muotoile liukuväriä säätämällä väripisteitä ja suuntaa.

Jokainen liukuväri renderöidään suoraan selaimessasi. Mitään tekemiäsi asetuksia ei lähetetä BroBroGo-palveluun.

UKK

Mitä eroa on lineaarisella, säteittäisellä ja kartiomaisella liukuvärillä?

Lineaarinen (linear) liukuväri sekoittaa värejä suoralla viivalla, jonka suunnan määrität kulmalla. Säteittäinen (radial) liukuväri levittää ne keskeltä ulospäin ympyränä tai ellipsinä. Kartiomainen (conic) liukuväri kiertää ne keskipisteen ympäri kuin väriympyrä.

Mitä ovat väripisteet?

Jokainen väripiste (color stop) on väri, joka on kiinnitetty tiettyyn kohtaan liukuvärissä – 0% alussa, 100% lopussa. Siirrä pistettä muuttaaksesi sen värin painotusta tai lisää pisteitä monipuolisemman sekoituksen luomiseksi. Voit käyttää enintään kahdeksaa pistettä.

Miten ohjaan suuntaa?

Lineaarisessa tai kartiomaisessa (conic) liukuvärissä kulman liukusäädin määrittää suunnan – 0° osoittaa ylös, 90° oikealle. Säteittäisellä (radial) liukuvärillä ei ole kulmaa; valitse sen sijaan ympyrän tai ellipsin muoto muuttaaksesi sen leviämistä.

CSS Cubic Bezier -generaattoriMuotoile kevennyskäyrää vetämällä kahta kahvaa, seuraa pisteen liikettä suhteessa tasaisen nopeaan ja kopioi cubic-bezier()-arvo.Box Shadow -generaattoriSäädä laatikon varjoa liukusäätimillä, pinoa tasoja syvyyden luomiseksi ja kopioi valmis CSS-koodi heti.Border Radius -generaattoriPyöristä kulmat liukusäätimillä, luo orgaanisia muotoja elliptisellä tilalla ja kopioi CSS-koodi heti.Flexbox-generaattoriMääritä flex-säiliö ja sen elementit visuaalisilla ohjaimilla, seuraa asettelun muutoksia reaaliajassa ja kopioi CSS yhdellä klikkauksella.CSS Grid -generaattoriMääritä sarakkeet ja rivit, vedä solujen yli sijoittaaksesi elementtejä ja kopioi grid-CSS sekä vastaava HTML yhdellä klikkauksella.CSS clamp() -laskuriSyötä koko pienille ja suurille näytöille ja saat joustavan clamp()-arvon, joka skaalautuu sujuvasti niiden välillä – sopii fonttikoille, sisällyksille tai väleille.VärimuunninMuunna värejä muotojen HEX, RGB, HSL, HSV, CMYK ja LAB välillä – muokkaa mitä tahansa kenttää ja muut päivittyvät reaaliajassa.CSS-muotoilija ja -minifoijaSisennä sekava CSS helposti luettavaksi tai minifoi se julkaisua varten – mukana turvallinen tila, joka säilyttää sääntöjen järjestyksen.KontrastilaskuriSyötä tekstin ja taustan väri nähdäksesi WCAG-kontrastisuhteen ja sen, mitkä AA- ja AAA-tasot hyväksytään.