Quick Start

  1. Open the Box Shadow tool. Adjust horizontal offset, vertical offset, blur radius, spread radius, and color in the left panel. The preview area updates in real time.
  2. Click the "Copy CSS" button to get the box-shadow property value, then paste it into your stylesheet.

Text Shadow Tips

  1. Switch to the Text Shadow tool. Enter your text, then set offset, blur, and color.
  2. Use the "Add Layer" feature to stack multiple shadows for 3D or glow effects.
  3. After finishing, copy the generated text-shadow code.

Advanced Usage

  • Preset Templates: Both tools offer popular shadow presets (e.g., flat shadow, neon glow) for one-click application.
  • Export & Share: Export shadow configs as JSON, or generate a short link to share with your team.

FAQ

Q: Can I combine box shadow and text shadow?
A: Yes. Copy code from both tools and apply them to the same element in your CSS.

Q: How do I make shadows softer?
A: Increase the blur radius and reduce color opacity (e.g., use rgba colors).

Q: Are negative offset values supported?
A: Yes. Negative horizontal offset moves shadow left, negative vertical offset moves it up.