Comment dessiner une forme blob organique en CSS pur ?
border-radius ne se limite pas aux coins arrondis. La syntaxe complète accepte huit valeurs (quatre pour l'axe horizontal, quatre pour le vertical), ce qui permet de dessiner des formes blob organiques utilisées sur les landing pages modernes (hero sections, avatars, illustrations ludiques).
Un simple `border-radius: 16px` donne un rectangle aux coins doux. Mais `border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%` devient une goutte, une feuille ou un galet. Chacun des quatre coins possède son propre rayon horizontal et rayon vertical.
Vous disposez ici de 8 curseurs plus un mode symétrique (4 curseurs pour les simples rectangles aux coins différents). Cliquez sur « Copier » et collez le CSS.
Mode d'emploi
- Cliquez sur un preset de blob dans la galerie ou partez de la valeur par défaut. Chaque curseur (0-100 %) modifie un seul coin.
- Activez symétrique si 4 curseurs suffisent (un rectangle aux rayons de coins différents). Désactivé = 8 valeurs complètes pour les formes organiques.
- Choisissez une couleur de remplissage et une couleur de toile pour voir la forme dans son contexte.
- Copiez le CSS et collez-le dans votre feuille de style. La forme s'adapte à la taille de l'élément puisque les valeurs sont en %.
- Astuce : ajoutez un `background: url(...)` ou un dégradé et vous obtenez un avatar organique ou un blob d'arrière-plan pour hero section.
Quand ça aide
Les formes organiques sont la tendance du webdesign moderne (Stripe, Framer, la plupart des landing pages fintech) :
- Hero section avec des blobs d'arrière-plan. Trois gros blobs colorés avec une ombre douce donnent un rendu premium sans aucune image.
- Avatars utilisateur. Au lieu de cercles parfaits, un squircle légèrement irrégulier (Apple HIG) a un rendu moins corporate.
- Décoration de carte produit. Un blob dans le coin de la carte comme élément graphique.
- Silhouettes d'icônes et de pictogrammes personnalisés.
- Sections de fonctionnalités sur une landing page. Un blob coloré derrière chaque puce = aspect ludique.
- Animation de morphing de blob. Avec `transition: border-radius 2s`, vous obtenez une forme qui se transforme lentement, un effet très en vogue dans les portfolios modernes.
Pour les ombres sous les formes organiques, voir le générateur box-shadow. Pour les formes angulaires complexes (étoiles, flèches, bulles de dialogue), utilisez le générateur clip-path.