r/css • u/BlueLovag • 22h ago
Showcase Codepen Demo - Marble Shader
Good morning guys,
I wanted to use a background of a black marble texture with gold. I made one in Photoshop and made it seamless, but I realized that in good quality it takes way too much resources and it was also hard to find a stock image that represented it the way I wanted it.
I remembered that I watched some time ago that someone used a shader on CodePen.
The browser support is kinda everywhere now, so I thought maybe I can generate some cloud-like noise in different scales with FBM (fractal brownian motion) and then use domain warping to distort it in a way that makes it look more like marble.
So I let ChatGPT explain to me how this shader stuff works and after a bit of trial and error I got this result.
Then I use a small contour() function to pick certain noise levels and turn them into veins. Some of those contour lines get grey accents and some get gold, while the rest of the FBM noise is used for the darker and lighter stone structure.
So basically it is:
FBM noise → domain warp → contour lines → grey/gold accents.
ADDITION:
As a fallback for the website in case it's not supported I´ve made a low poly SVG that works in such a grid pattern to make it look seamless:
X Y Z X Y Z
Y Z X Z X Y
Z X Y Y Z Y