15
Found out CSS gradients can make realistic wood grain patterns
I was messing around on CodePen last night trying to make a simple background for a portfolio piece and stumbled on someone's post about using layered linear gradients with slight angle shifts. Turns out you can get a pretty convincing wood texture just by stacking 5 or 6 gradients with different brown shades and tight repeating stops. Has anyone else tried making organic textures like wood or marble with just CSS, or is there a trick I'm missing to make them look less blocky?
2 comments
Log in to join the discussion
Log In2 Comments
ninam867d ago
Yeah, that's a cool trick. Have you tried adding a radial gradient with some dark brown transparency for knots? Might break up the repeating pattern enough to fix the blocky look.
4
alice_barnes357d ago
Oh man, I literally just tried something different! Instead of messing with gradients, I took the wood texture and layered a faint noise filter over it at like 5% opacity in the blotchy spots. It scatters the pixels just enough that your eye stops catching the repeats. Pair that with a subtle displacement map on the whole thing and it looks way more organic. Cheaper on performance too since you're not stacking a ton of gradient layers.
6