Pređi na glavni sadržaj
LibraTool logoLibraTool

Generator CSS border-radius efekta — besplatno

Vizuelno dizajnirajte zaobljene uglove sa nezavisnom kontrolom svakog ugla. Podržava eliptičnu X/Y sintaksu za organske oblike.

Radi van mreže kada se učita
border-radius: 20px 20px 20px 20px;
Jedinica

Uobičajene upotrebe

  • Organični Blob ObliciKoristite eliptičnu X/Y sintaksu da biste kreirali jedinstvene blob oblike za hero sekcije i ilustracije.
  • Uglovi Kartice i KontejneraStandardni zaobljeni uglovi za kartice, kontejnere i panele u modernom UI dizajnu.
  • Avatar & Oblici Profilnih SlikaKreirajte pravi stil ugla za profilne slike: kružno, squircle ili zaobljeni kvadrat.
  • Piluli, Tagovi i OznakeIzgradite savršeno zaobljena dugmad za pilule, tagove i oznake sa 9999 presetom.
  • Asimetrični Uglovi DizajnaMešajte radijuse kroz uglove da biste kreirali distinktivne, brendski prepoznatljive oblike kartice i dugmadi.

Kako funkcioniše

Generator border-radius se u potpunosti izvršava u pregledaču — bez servera, biblioteke, ili otpremanja. Gradi niz CSS vrednosti border-radius direktno u JavaScript-u koristeći React stanje i useMemo, a zatim ga primenjuje kao inline stil na živi div element tako da sopstveni CSS mehanizam pregledača iscrtava oblik u realnom vremenu.

  1. 1
    Klizači upisuju stanje
    Svaki uneseni opseg upisuje jednu od osam brojčanih promenljivih stanja — četiri horizontalna poluprečnika uglova i četiri vertikalna za eliptični režim. Objedinjeni režim svodi svih osam na jedan klizač preko pomoćne funkcije setAll koja usklađuje svaku vrednost odjednom.
  2. 2
    useMemo sastavlja CSS vrednost
    useMemo hook ponovo izračunava niz border-radius kad god se promeni bilo koja vrednost ugla, jedinica (px ili %), ili eliptični prekidač. U standardnom režimu proizvodi skraćenicu od četiri vrednosti; sa uključenim eliptičnim, dodaje kosu crtu za punu sintaksu od osam vrednosti — npr. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS mehanizam pregledača iscrtava pregled
    Izračunati niz se postavlja kao inline stil borderRadius na obični div element. Mehanizam za raspored pregledača radi sve iscrtavanje — nema platna (canvas), SVG-a, niti koda za crtanje trećih strana.
  4. 4
    Clipboard API kopira izlaz
    Klik na Kopiraj poziva navigator.clipboard.writeText sa ili CSS deklaracijom (border-radius: ...;) ili odgovarajućom Tailwind klasom proizvoljne vrednosti (rounded-[...]), u zavisnosti od izabranog formata.

Slične alatke

🎨

Generator CSS box-shadow efekta

Vizuelni alat za CSS box-shadow sa pregledom uživo, slaganjem više slojeva, biranjem boje, prekidačem za unutrašnju senku i kopiranjem jednim klikom. Uključuje predloške Material, neumorfizma i sjaja.

Isprobajte
🟦

CSS Grid generator

Vizuelno dizajnirajte CSS mrežu — trake, jedinice i razmake — i kopirajte generisani CSS i HTML.

Isprobajte
↔️

CSS Flexbox generator

Eksperimentišite sa smerom, prelamanjem, raspodelom i poravnanjem stavki uživo — i kopirajte CSS.

Isprobajte

Česta pitanja