Just realized CSS gradients can make wood grain patterns

I was messing around trying to make a simple background for a cabin scene and spent like 2 hours failing with solid colors. Then I tried stacking multiple linear gradients at different angles and it actually looks like pine boards. Not perfect but way better than I expected. Took me 6 tries to get the brown and tan stripes lined up right. Has anyone else found unexpected uses for layered gradients?

2 comments

2 Comments

avery3665d ago

Stack another gradient on top with a slightly darker brown at like 10 or so percent opacity and it'll give you a fake grain knot that tricks the eye. I did something similar for a retro wood paneling effect and it ended up looking good enough to impress a UI designer friend. Works especially well if you rotate one of the layers a few degrees so the lines cross instead of matching up perfectly.

emma_ramirez5d ago

I used to be a TOTAL skeptic about gradients for anything realistic, always thought they were just for flat, boring backgrounds. But then I tried making a worn leather texture for a dashboard mock-up using like 4 gradients with different opacities and it actually looked like wrinkled old leather. That experiment completely flipped my brain. Your wood grain method is way more clever than what I was doing, I just threw random angles and hoped for the best. The tip about rotating one layer a few degrees is GENIUS though, I can see how crossing lines instead of parallel ones would give it that natural uneven look. Guess I owe gradients a real apology.