Found a CSS trick that made a gradient look 3D without any shadows

I was messing around with radial gradients last night on my personal site and stumbled into something wild. I layered two gradients on top of each other using a slight offset in the background-position values. It gave this little sphere a raised bump effect that looked almost like real lighting. No box-shadow or filter needed. Has anyone else played with stacking gradients like this to fake depth?

2 comments

2 Comments

burns.brooke13h ago

I tried this exact thing about 6 months back when I was building a button component for my portfolio. I used a dark to light radial gradient at 50% 40% and a second one with the opposite colors offset to 60% 50%. It created a little highlight bump that looked like a soft plastic dome. The trick is keeping the background-size values identical so the offset is clean and not stretched.

kai77911h ago

Yeah I tried this and somehow ended up with a gradient that looked like a deflated beach ball. Probably user error on my end.