HTML + CSSArrière-plans

Marbre liquide

Des veines de couleur coulent à l’écran comme du marbre liquide ou du papier marbré, grâce à un filtre SVG.

Réglages

Couleur 1#0071e3

Couleur 2#c4b5fd

Couleur 3#14b8a6

Vitesse1x

Densité / échelle1x

Opacité1

Code

index.html

<div class="pt-marble"><svg width="0" height="0" style="position:absolute"><filter id="pt-marble-f" x="-20%" y="-20%" width="140%" height="140%"><feTurbulence type="fractalNoise" baseFrequency="0.004 0.007" numOctaves="4" seed="7"/><feDisplacementMap in="SourceGraphic" scale="200"/></filter></svg><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

Dégradé mesh

Arrière-plansHTML + CSS

Fond aurore boréale

Arrière-plansHTML + CSS

Dégradé qui respire

Arrière-plansHTML + CSS

Coucher de soleil liquide

Arrière-plansHTML + CSS

Grille de points en onde

Arrière-plansHTML + CSS

Grille synthwave

Arrière-plansHTML + CSS

Fond en nid d’abeille

Arrière-plansHTML + CSS

Lignes diagonales lumineuses

Arrière-plansHTML + CSS

Où l’utiliser

Le marbrage a un côté artisanal et un brin luxueux. Il fonctionne sur le site d’un atelier de céramique, pour le lancement d’une gamme de cosmétiques ou en couverture d’un portfolio d’architecture d’intérieur. Les veines glissent sans arrêt et le motif se redessine peu à peu. Un fond marbré animé en HTML et CSS, avec un filtre SVG.

Trois couleurs proches et le fond sombre donnent le rendu classique ; ajoutez un doré ou un crème pour vous rapprocher de la vraie pierre. Posez le texte sur une carte ou un aplat, car les veines passent partout.