Generator zaobljavanja kutova (Border Radius)

Zaoblite svaki kut pomoću klizača, oblikujte organske mrlje pomoću eliptičnog načina rada i odmah kopirajte CSS.

Predlošci
Kutovi
Svi kutovi
24px
CSS
Povucite klizače kako biste zaoblili kutove.

Svaki se kut iscrtava izravno u Vašem pregledniku. Ništa što ovdje postavite ne šalje se na BroBroGo.

Česta pitanja

Kako funkcioniraju četiri kuta i razlika između px i %?

Četiri klizača mapiraju se, u smjeru kazaljke na satu, na gornji lijevi, gornji desni, donji desni i donji lijevi kut. U pikselima se kut zaobljuje za fiksni iznos; u postocima se zaobljuje u odnosu na okvir — vodoravni postotak prati širinu, a okomiti visinu, pa 50% pretvara kvadrat u krug.

Što radi eliptični način rada?

Kada je isključeno, svaki je kut četvrtina kruga s jednim radijusom. Kada ga uključite, svaki kut dobiva zaseban vodoravni i okomiti radijus, što vam omogućuje stvaranje mekih, organskih oblika mrlje ("blob"). Generator automatski piše kosu crtu za dvije vrijednosti u CSS-u i vraća se na kratki oblik kada kutovi ponovno postanu okrugli.

Kako mogu napraviti savršen krug ili oblik pilule?

Povežite kutove, prebacite na postotke i postavite na 50%: kvadrat postaje krug. Za gumb u obliku pilule zadržite piksele i povucite kut preko polovice visine gumba — stranice ostaju potpuno zaobljene pri bilo kojoj širini. Predložak "Krug" postavlja prvi slučaj jednim klikom.

CSS Cubic Bezier GeneratorPovucite dvije ručice kako biste oblikovali krivulju ubrzanja, pratite kretanje točke u usporedbi sa stabilnom brzinom i kopirajte cubic-bezier() vrijednost.Generator sjena (Box Shadow)Povucite klizače za oblikovanje sjene elementa, složite slojeve za dubinu i odmah kopirajte gotov CSS.Generator gradijenataIzgradite linearni, radijalni ili konusni gradijent, dodajte točke boja i postavite smjer, a zatim kopirajte CSS jednim klikom.Flexbox generatorPostavite flex kontejner i njegove stavke pomoću vizualnih kontrola, pratite promjene uživo i kopirajte CSS jednim klikom.CSS Grid GeneratorPostavite stupce i retke, povucite preko ćelija za postavljanje stavki i kopirajte grid CSS s odgovarajućim HTML-om jednim klikom.CSS clamp() kalkulatorUnesite veličinu za male i velike zaslone i dobit ćete fluidnu clamp() vrijednost koja se glatko skalira između njih — za veličine fonta, padding, margine ili razmake.Pretvarač bojaPretvorite boje između formata HEX, RGB, HSL, HSV, CMYK i LAB — uredite bilo koje polje i ostala se ažuriraju u hodu.