Design beautiful, consistent depth effects for your web elements.
Move the shadow horizontally or vertically to simulate light direction.
Increase blur for a soft, natural look, or adjust spread to change the size.
Pick a color and opacity, then copy the generated CSS directly into your project.
The blur radius determines how "fuzzy" the shadow is. A value of 0 creates a sharp, solid shadow. Higher values make the shadow softer and more diffused.
Inset shadows appear inside the element, creating a "pressed" or "carved" effect. This is popular for input fields or buttons that are in a pressed state.
Yes, using RGBA (Red, Green, Blue, Alpha) allows you to control the transparency of the shadow. Transparent shadows (like 10-20% opacity) look much more realistic on web pages.