Loading…
14
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
Log in to join the discussion
Log In2 Comments
burns.brooke4mo 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.
6
kai7794mo 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.
0