Liquid marble
Veins of color flow across the screen like liquid marble or marbled paper, drawn with an SVG filter.
Settings
Code
<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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
Marbling feels handmade and a bit luxurious. It works for the homepage of a ceramics studio, the packaging reveal of a cosmetics brand or the cover of an interior design portfolio. The veins drift sideways non-stop, so the pattern slowly reshapes itself. An animated marble background in HTML and CSS, shaped by an SVG filter.
Three close colors plus the dark background give the classic look; add a gold or cream tone for something closer to real stone. Keep text on a solid block or card, because the veins run through everything.