Generator Border Radiusa
Dizajnirajte CSS border-radius vizualno: četiri neovisna slidera za kutove u px ili postocima, prečac za povezivanje svih kutova za trenutne krugove i pilule te organski blob način s nasumičnim oblicima.
🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.
Rezultat
Deklaracija border-radius može primiti do četiri neovisne vrijednosti kuta plus opcionalnu sintaksu osam vrijednosti s kosom crtom za organske krivulje — više pokretnih dijelova nego što većina ljudi shvaća dok im ne zatreba nešto više od jednostavne zaobljene kartice. Ovaj generator stavlja svaki od tih dijelova na ekran: četiri slidera za kutove s vlastitom jedinicom px ili postotak, prečac za povezivanje svih kutova za simetrične oblike i blob način za oblike koje nijedna pojedinačna vrijednost radijusa ne može izraziti.
Način rada s kutovima pokriva oblike za kojima ljudi zapravo posežu: povežite svaki kut s jednim sliderom za savršene krugove, pilule i squirclove ili ih odvežite kako biste zaoblili samo vrh padajućeg panela ili samo jednu stranu kartice. Pregled sa šahovskom pozadinom iza oblika, s mogućnošću prebacivanja između svijetle i tamne podloge, čini očitim točno koji kutovi bivaju odrezani pri bilo kojem radijusu — isti vizualni trik koji alati za datoteke na ovoj stranici koriste za prikaz prozirnosti.
Blob način je druga polovica: CSS sintaksa osam vrijednosti s kosom crtom dopušta da se vodoravni i okomiti radijusi svakog kuta razlikuju, što pretvara zaobljeni pravokutnik u organski, nepravilni obris. Pritisnite Randomiziraj za novi oblik u bilo kojem trenutku i kopirajte točan CSS koji stoji iza njega — bez potrebe za SVG izvozom ili vanjskim bibliotekama. Unaprijed definirane stranice pokrivaju zahtjeve koje ljudi zapravo upisuju u tražilicu: savršeni krug, gumb u obliku pilule stadiona, squircle u iOS stilu i gotovi organski blob.
Kao i svaki alat na ovoj stranici, radi u potpunosti u vašem pregledniku: bez učitavanja, bez računa, a generator nastavlja raditi izvan mreže nakon što se stranica učita.