Creating a box-shadow on only one side of an element

For those of you out there who are looking to learn how to create a one-sided shadow effect to an element in CSS.

First I recommend using a site like getcssscan (beautiful css shadow examples) to find a shadow style you like. You won't be able to create a better looking box-shadow on your own, trust me.

Next what you're looking for is clip-path. This will give you the clean one-sided shadow you are looking to achieve. This method is much better than using negative margin or anything else that Gemini and other AI seems to be suggesting.

Example of a bottom-only box-shadow. We actually use this for the navigation over here at OddsRabbit.

.drop-shadow { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; clip-path: inset(0px 0px -15px 0px); }

For shadow that is only on the top, left, or right, simply change the inset as needed.

Let me know what else you'd be interested in learning!