Organische CSS-blobvormgenerator
Ontwerp de CSS-randradius visueel: vier onafhankelijke hoekschuifregelaars in px of procent, een snelkoppeling naar alle hoeken voor directe cirkels en pillen, plus een organische blob-modus met willekeurige vormen.
Resultaat
Deze pagina opent de grensradiusgenerator rechtstreeks in de blob-modus met een organische vorm die al is geladen: geen vierkante hoeken, geen perfecte cirkel, alleen een zachte, onregelmatige omtrek die alleen uit CSS is opgebouwd. Druk op elk gewenst moment op Willekeurig voor een nieuwe variant.
De truc achter elke CSS-blob is de slash-syntaxis met acht waarden: border-radius accepteert twee sets van vier percentages gescheiden door een schuine streep, waarbij de eerste set de horizontale stralen buigt en de tweede de verticale. Het niet bij elkaar passen van de twee sets is precies wat de symmetrie van een effen afgeronde rechthoek in een organische omtrek verbreekt.
Dit soort klodders vullen de lege ruimte achter heldenafbeeldingen, avatars en illustraties op talloze moderne landingspagina's, juist omdat er geen bibliotheek of SVG-export nodig is: het zijn vier regels CSS. Kopieer de huidige vorm, of blijf willekeurig maken totdat u zich goed voelt bij uw lay-out.