How to Use the CSS Box Shadow Generator
The box-shadow property is one of the most effective ways to add depth, hierarchy, and dimension to your web elements. It accepts several values to define the shadow's appearance:
- Horizontal & Vertical Offsets: Determine the shadow's light-source direction. Positive values push the shadow right/down, negative values push it left/up.
- Blur Radius: Controls the sharpness. A value of 0 means the shadow is completely sharp and solid. Higher values diffuse the shadow across a wider area.
- Spread Radius: Expands or contracts the physical size of the shadow before blur is applied.
How do I create a glowing effect?
To create a neon glow, set both the Horizontal and Vertical Offsets to 0px. Choose a slight positive Spread Radius (e.g., 2px) and a high Blur Radius (e.g., 20px). Using a bright, vibrant color (like Cyan or Neon Pink) with high opacity will make the element appear to emit light.
What is an Inset shadow?
By default, shadows are "outset" (falling outside the element's bounding box). Toggling the type to "Inset" draws the shadow inside the element, which is perfect for creating pressed buttons, hollow input fields, or etched text effects.