Des couleurs à accorder, un dégradé ou une grille CSS à écrire, une maquette de post à montrer : ces outils rendent un résultat prêt à copier ou à télécharger, sans compte et sans logiciel.
Des couleurs à accorder, un dégradé ou une grille CSS à écrire, une maquette de post à montrer : ces outils rendent un résultat prêt à copier ou à télécharger, sans compte et sans logiciel.
Formes organiques aléatoires pour vos designs
Les blobs, ces formes organiques aux courbes douces, sont partout dans le design web moderne : fonds de section, masques de photo, décorations de page d'accueil. Ce générateur en crée à l'infini : réglez la complexité (nombre de points) et l'irrégularité, choisissez une couleur unie ou un dégradé, et cliquez sur « Nouveau blob » jusqu'à trouver la forme qui vous plaît. Le résultat s'exporte en SVG (vectoriel, léger, redimensionnable sans perte) ou en PNG haute résolution, et le code SVG se copie tel quel dans votre HTML, votre CSS ou un outil comme Figma.
Code SVG
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blobGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#6366f1"/>
<stop offset="100%" stop-color="#ec4899"/>
</linearGradient>
</defs>
<path fill="url(#blobGrad)" d="M 163.8 100.0 C 163.2 118.7, 155.7 144.9, 143.0 153.9 C 130.3 162.9, 104.1 158.5, 87.7 154.0 C 71.3 149.4, 54.3 141.3, 44.6 126.7 C 34.9 112.0, 22.8 81.3, 29.6 66.1 C 36.4 50.9, 65.7 39.5, 85.2 35.4 C 104.8 31.3, 133.6 30.7, 146.6 41.5 C 159.7 52.3, 164.4 81.3, 163.8 100.0 Z"/>
</svg>Formes organiques pour fonds de section, masques d'image ou illustrations. Le SVG se colle tel quel dans votre HTML ou Figma.
À casser la rigidité des blocs rectangulaires : en fond de section hero, en masque derrière un portrait, en tache décorative autour d'un bouton. Sa forme organique apporte de la douceur et attire l'œil sans surcharger la page.
Le SVG est vectoriel : quelques centaines d'octets, redimensionnable à l'infini sans pixellisation, recolorable en CSS. Préférez-le pour le web. Le PNG (1024 px) sert pour les outils qui n'acceptent pas le SVG, comme certains éditeurs de présentation.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr