Border-radius Generator
Gratis kreativ border-radius-generator online. Dra i 8 handtag eller välj en blob-förinställning för att skapa organiska CSS-former och kopiera koden direkt.
Vad betyder 8-värdes-syntaxen för border-radius?
I syntaxen border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 är värdena före snedstrecket horisontella radier (uppe vänster, uppe höger, nere höger, nere vänster) och värdena efter är vertikala radier. Olika värden i varje riktning är det som skapar de organiska blob-formerna.
Hur använder jag den genererade CSS-koden?
Kopiera border-radius-raden och klistra in den i valfri CSS-regel för elementet du vill forma, t.ex. .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Fungerar i ren CSS, Sass, Tailwind arbitrary values och inline-stilar.
Var används blob-former?
Blob-former är populära för hero-illustrationer, avatarer, profilbilder, funktionskort, knappar och dekorativa bakgrunder i modern webb- och appdesign.
Fungerar rundade hörn i alla webbläsare?
Ja. border-radius stöds av alla moderna webbläsare, inklusive Chrome, Firefox, Safari, Edge och mobilwebbläsare, utan leverantörsprefix.
Kan jag animera blob-formen?
Ja. border-radius är animerbar, så en CSS-transition låter dig mjukt morfa mellan former, t.ex. .blob { transition: border-radius .8s ease; }.
Vad är skillnaden mellan 4-värdes- och 8-värdes-syntaxen?
4-värdesformen ger varje hörn samma horisontella och vertikala radie, vilket räcker för piller och cirklar. 8-värdesformen separerar horisontella och vertikala radier, vilket möjliggör asymmetriska, organiska former.
Hur skapar jag en perfekt cirkel?
Sätt alla åtta värden till 50 % på ett kvadratiskt element, eller använd helt enkelt border-radius: 50%. Du kan också börja från en cirkelliknande förinställning och finjustera.
Laddas mina data upp någonstans?
Nej. Generatorn körs helt i din webbläsare med ren CSS och JavaScript. Inget av det du drar, skriver eller kopierar skickas till någon server.
Kan jag använda detta på icke-kvadratiska element?
Ja, men procentuella radier är relativa till elementets dimensioner, så en rektangel får ellipsformade hörn och ser annorlunda ut än den kvadratiska förhandsvisningen. Använd de genererade värdena som startpunkt och justera.
Hur man använder Border-radius Generator
Border-radius med åtta värden skapar organiska blob-formor med elliptiska hörn som ingen vanlig avrundad rektangel kan matcha. Forma bloben med handtagen och kopiera den färdiga CSS:n — allt renderas live i din webbläsare.
- Dra i något av de åtta handtagen på formens kanter — de på över- och underkanten styr de horisontella radierna, de på sidorna de vertikala.
- Klicka på en av de sex förinställda rutorna för att utgå från en designad blob och finjustera sedan värdena i fälten Horisontella radier och Vertikala radier (ett per hörn, 0–100 %).
- Tryck på Slumpa för att få en ny organisk form med ett klick, eller Återställ för att återgå till standardform och färger.
- Välj Formfärg och Bakgrund för att se bloben mot din målpallétt — båda uppdateras direkt.
- Tryck på Kopiera CSS för att hämta den live-visade border-radius-deklarationen i fältet längst ner och klistra in den på valfritt element.
Applicera koden på ett kvadratiskt element med overflow: hidden för den klassiska blob-looken; procent håller kurvan smidig i varje storlek, och snedstrecket i syntaxen skiljer horisontella radier från vertikala.
Relaterade verktyg
- CSS Border Radius Generator Visuell CSS border-radius generator. Justera varje hörn oberoende med realtidsförhandsgranskning och kopiera CSS-koden omedelbart.
- CSS-gradientgenerator Skapa fantastiska CSS-gradienter visuellt. Generera linjära, radiella och koniska gradienter med flera färgstopp, vinklar och positioner. Kopiera produktionsklar CSS-kod omedelbart.
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Skapa vackra skuggor visuellt med justerbar offset, oskärpa, spridning, färg och infällning. Live förhandsgranskning och omedelbar kodkopiering.
- Färgpalettgenerator Skapa vackra, harmoniska färgpaletter direkt med vår gratis onlinegenerator. Stöder monokromatiska, analoga, komplementära, triadiska, split-komplementära och tetradiska lägen. Finjustera färger med HSL-reglag, lås favoriter och exportera som CSS, Tailwind, JSON eller SVG. 100% webbläsarbaserad, din data lämnar aldrig din enhet.
- Färgkonverterare Gratis online färgkonverterare. Konvertera HEX, RGB, HSL, HSV format omedelbart med visuell väljare. 100% privat, körs i din webbläsare.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunkterna på en interaktiv kurva, välj bland 18 förinställningar, titta på en loopande bollanimation och kopiera tidsfunktionen direkt.
- CSS Textskugggenerator Gratis online textskugggenerator. Stapla flera skugglager med offset, oskärpa, färg och opacitet, prova förinställningar som Neon, 3D, Retro och kopiera CSS-koden direkt.
- CSS Clip-path-generator Gratis online CSS clip-path-generator. Formge polygon-, cirkel-, ellips- och inset-former med dragbara punkter, liveförhandsvisning och CSS-kod med ett klick.