Box Shadow Generator

Giới thiệu về Box Shadow Generator

CSS Box Shadow Generator gives you a visual, real-time editor for crafting the perfect box-shadow CSS property without writing a single line of code by hand. Box shadows are one of the most powerful CSS effects — they add depth, elevate interactive elements, create glowing accents, and can even simulate borders or inset indentations. This tool supports up to five simultaneous shadow layers, letting you compose sophisticated multi-shadow effects like the popular "layered" technique (multiple soft shadows at increasing distances) that produces a more realistic depth effect than a single shadow can achieve. For each layer you can independently control the horizontal offset, vertical offset, blur radius, spread radius, color, opacity, and whether the shadow is inset or outset. Built-in presets cover the most common use cases from a subtle lift to a vibrant colored glow. Copy the output as a plain CSS rule or a Tailwind CSS arbitrary value class.

Làm sao để Box Shadow Generator?

1. Use the sliders to adjust the Horizontal Offset, Vertical Offset, Blur Radius, Spread Radius, and Opacity for the active shadow layer.
2. Click the Color picker to choose the shadow color, and toggle the "Inset" checkbox to switch between outset and inset shadows.
3. Click "+" to add a second shadow layer (up to 5) for multi-layer effects.
4. Try one of the built-in presets (Subtle, Medium, Heavy, Colored, Inset, Sharp, Layered, Glow) as a starting point.
5. Use the preview panel on the right to evaluate the shadow. Customize the background color, box color, and border radius.
6. Click "Copy CSS" to copy the box-shadow CSS rule, or "Copy Tailwind" to copy the equivalent Tailwind arbitrary-value class.

Câu hỏi thường gặp

Công cụ liên quan