HTML + CSSArrière-plans

Dégradé mesh

Cinq taches de couleur qui se fondent entre elles et dérivent lentement, comme un dégradé vivant.

Réglages

1x
1x
1

Code

<div class="pt-mesh"><i></i><i></i><i></i><i></i><i></i></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Arrière-plans

Où l’utiliser

Un dégradé mesh trouve naturellement sa place dans le hero d’une landing page SaaS, sur la page d’accueil d’un portfolio de designer ou derrière une liste d’attente. Il apporte de la couleur et un mouvement lent, sans qu’aucune forme ne vole la vedette à votre titre. C’est un fond dégradé animé en HTML et CSS, sans bibliothèque.

Choisissez des couleurs proches sur le cercle chromatique, bleu et violet par exemple, et le mélange restera propre. Des couleurs opposées deviennent vite boueuses là où elles se croisent. Avec un texte blanc par-dessus, baissez un peu l’opacité ou ajoutez un voile sombre derrière le texte.