Organische CSS-blobvormgenerator
Ontwerp CSS border-radius visueel: vier onafhankelijke hoeksliders in px of procenten, een 'alle hoeken koppelen'-shortcut voor direct cirkels en pillen, plus een organische blob-modus met willekeurige vormen.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de border-radius-generator direct in blob-modus met een organische vorm al geladen: geen rechte hoeken, geen perfecte cirkel, gewoon een zachte, onregelmatige omtrek die alleen met CSS is opgebouwd. Klik op Randomiseer wanneer je maar wilt voor een frisse variant.
Het geheim achter elke CSS-blob is de syntax met acht waarden en een schuine streep: border-radius accepteert twee sets van vier percentages, gescheiden door een schuine streep. De eerste set bepaalt de horizontale radii, de tweede de verticale. Door de twee sets niet gelijk te maken, breek je de symmetrie van een eenvoudige afgeronde rechthoek en ontstaat een organische omtrek.
Dit soort blobs vullen de lege ruimte achter hero-afbeeldingen, avatars en illustraties op talloze moderne landingspagina's, juist omdat er geen library of SVG-export nodig is — het is maar vier regels CSS. Kopieer de huidige vorm of blijf randomiseren tot er een goed voelt voor jouw layout.