Organisk CSS Blob Shape Generator
Designa CSS-kantradie visuellt: fyra oberoende hörnreglage i px eller procent, en genväg för alla hörn för direkta cirklar och piller, plus ett organiskt blobläge med slumpmässiga former.
Resultat
Den här sidan öppnar generatorn för gränsradie direkt i blob-läge med en organisk form redan laddad: inga fyrkantiga hörn, ingen perfekt cirkel, bara en mjuk oregelbunden kontur byggd av enbart CSS. Tryck på Randomize när som helst för en ny variant.
Tricket bakom varje CSS-blobb är snedstrecksyntaxen med åtta värden: border-radius accepterar två uppsättningar av fyra procentsatser åtskilda av ett snedstreck, den första uppsättningen kröker de horisontella radierna och den andra de vertikala. Att inte matcha de två uppsättningarna är precis det som bryter symmetrin hos en vanlig rundad rektangel till en organisk kontur.
Blobbar som denna fyller det tomma utrymmet bakom hjältebilder, avatarer och illustrationer på otaliga moderna målsidor, just för att inget bibliotek eller SVG-export behövs – det är fyra rader med CSS. Kopiera den aktuella formen, eller fortsätt att slumpvisa tills en känns rätt för din layout.