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!
Comments
No comments yet. Why don't you leave the first?