Border-radius Generator
Gratis kreativ border-radius-generator online. Dra i 8 håndtak eller velg en blob-forhåndsinnstilling for å lage organiske CSS-former og kopiere koden umiddelbart.
Hva betyr 8-verdi-syntaksen for border-radius?
I syntaksen border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 er verdiene før skråstreken horisontale radier (oppe til venstre, oppe til høyre, nede til høyre, nede til venstre) og verdiene etter er vertikale radier. Ulike verdier i hver retning er det som skaper de organiske blob-formene.
Hvordan bruker jeg den genererte CSS-koden?
Kopier border-radius-linjen og lim den inn i en vilkårlig CSS-regel for elementet du vil forme, for eksempel .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Fungerer i ren CSS, Sass, Tailwind arbitrary values og inline-stiler.
Hvor brukes blob-former?
Blob-former er populære i hero-illustrasjoner, avatarer, profilbilder, funksjonskort, knapper og dekorative bakgrunner i moderne web- og appdesign.
Virker avrundede hjørner i alle nettlesere?
Ja. border-radius støttes av alle moderne nettlesere, inkludert Chrome, Firefox, Safari, Edge og mobile nettlesere, uten leverandørprefikser.
Kan jeg animere blob-formen?
Ja. border-radius kan animeres, så en CSS-overgang lar deg mykt morfe mellom former, for eksempel .blob { transition: border-radius .8s ease; }.
Hva er forskjellen mellom 4-verdi- og 8-verdi-syntaksen?
4-verdi-formen gir hvert hjørne samme horisontale og vertikale radius, nok for piller og sirkler. 8-verdi-formen skiller horisontale og vertikale radier, noe som muliggjør asymmetriske, organiske former.
Hvordan lager jeg en perfekt sirkel?
Sett alle åtte verdiene til 50 % på et kvadratisk element, eller bruk rett og slett border-radius: 50%. Du kan også starte fra en sirkellignende forhåndsinnstilling og finjustere.
Blir dataene mine lastet opp noe sted?
Nei. Generatoren kjører helt i nettleseren din med ren CSS og JavaScript. Ingenting av det du drar, skriver eller kopierer sendes til noen server.
Kan jeg bruke dette på ikke-kvadratiske elementer?
Ja, men prosentvise radier er relative til elementets dimensjoner, så et rektangel får elliptiske hjørner og ser annerledes ut enn den kvadratiske forhåndsvisningen. Bruk de genererte verdiene som utgangspunkt og juster.
Slik bruker du Border-radius Generator
Border-radius med åtte verdier gir organiske blob-former med elliptiske hjørner som et vanlig avrundet rektangel ikke kan måle seg med. Form bloben med håndtakene og kopier den ferdige CSS-en — alt rendres levende i nettleseren din.
- Dra i ett av de åtte håndtakene på formens kanter — de på øvre og nedre kant styrer de horisontale radiene, de på sidene de vertikale.
- Klikk på én av de seks forhåndsinnstilte rutenene for å starte fra en designet blob, og finjuster deretter verdiene i tallfeltene Horisontale radier og Vertikale radier (ett per hjørne, 0–100 %).
- Trykk Tilfeldig for å trille en ny organisk form med ett klikk, eller Nullstill for å gå tilbake til standardform og farger.
- Velg Formfarge og Bakgrunn for å se bloben mot målpalletten din — begge oppdateres øyeblikkelig.
- Trykk Kopier CSS for å hente den levende border-radius-deklarasjonen nederst i feltet, og lim den inn på hvilket som helst element.
Bruk koden på et kvadratisk element med overflow: hidden for den klassiske blob-looken; prosent holder kurven flytende i enhver størrelse, og skråstreket i syntaksen skiller horisontale radier fra vertikale.
Relaterte verktøy
- CSS Border Radius Generator Visuell CSS border-radius generator. Juster hvert hjørne uavhengig med sanntidsforhåndsvisning og kopier CSS-koden umiddelbart.
- CSS-gradientgenerator Lag fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere fargestopp, vinkler og posisjoner. Kopier produksjonsklar CSS-kode umiddelbart.
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Lag vakre skygger visuelt med justerbar forskyvning, uskarphet, spredning, farge og innfelt. Live forhåndsvisning og umiddelbar kodekopiering.
- Fargepalettgenerator Lag vakre, harmoniske fargepaletter umiddelbart med vår gratis nettgenerator. Støtter monokromatiske, analoge, komplementære, triadiske, splitt-komplementære og tetradiske moduser. Finjuster farger med HSL-glidebrytere, lås favoritter og eksporter som CSS, Tailwind, JSON eller SVG. 100% nettleserbasert, dataene dine forlater aldri enheten.
- Fargekonverterer Gratis online fargekonverterer. Konverter HEX, RGB, HSL, HSV formater umiddelbart med visuell velger. 100% privat, kjører i nettleseren din.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunktene på en interaktiv kurve, velg blant 18 forhåndsinnstillinger, se en loope ballanimasjon og kopier tidsfunksjonen med en gang.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabble flere skyggelag med forskyvning, uskarphet, farge og gjennomsiktighet, prøv forhåndsinnstillinger som Neon, 3D, Retro og kopier CSS-koden med en gang.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formgi polygon-, sirkel-, ellipse- og insett-former med flyttbare punkter, forhåndsvisning og CSS-kode med ett klikk.