Border Radius -generaattori

Pyöristä kulmat liukusäätimillä, luo orgaanisia muotoja elliptisellä tilalla ja kopioi CSS-koodi heti.

Esiasetukset
Kulmat
Kaikki kulmat
24px
CSS
Pyöristä kulmat vetämällä liukusäätimiä.

Jokainen kulma piirretään suoraan selaimessasi. Mitään tekemiäsi asetuksia ei lähetetä BroBroGo-palveluun.

UKK

Miten neljä kulmaa ja px vs. % toimivat?

Neljä liukusäädintä vastaavat myötäpäivään ylävasenta, yläoikeaa, alaoikeaa ja alavasenta kulmaa. Pikseleinä kulma pyöristyy kiinteän määrän; prosenteina se pyöristyy suhteessa laatikkoon – vaakasuuntainen prosenttiosuus noudattaa leveyttä ja pystysuuntainen korkeutta, joten 50% muuttaa neliön ympyräksi.

Mitä elliptinen tila tekee?

Kun tila on pois päältä, jokainen kulma on neljännesympyrä yhdellä säteellä. Kun otat sen käyttöön, jokainen kulma saa erillisen vaaka- ja pystysäteen, joiden avulla voit luoda pehmeitä, orgaanisia "läiskämuotoja" (blob). Generaattori kirjoittaa puolestasi kahden arvon vinoviivamuodon ja palaa lyhyeen muotoon heti, kun kulmat ovat jälleen pyöreitä.

Miten teen täydellisen ympyrän tai pillerin muodon?

Linkitä kulmat, vaihda yksiköksi prosentti (%) ja aseta arvoksi 50%: neliöstä tulee täydellinen ympyrä. Jos haluat pillerin muotoisen painikkeen, käytä pikseleitä (px) ja vedä kulmasäädin yli puoleen painikkeen korkeudesta – sivut pysyvät täysin pyöristettyinä leveydestä riippumatta. Ympyrä-esiasetus tekee ensimmäisen näistä yhdellä klikkauksella.

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.Liukuväri-generaattoriLuo lineaarinen, säteittäinen tai kartiomainen liukuväri, lisää väripisteitä ja aseta suunta, ja kopioi sitten CSS yhdellä klikkauksella.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.