This tool helps you generate beautiful box shadows and border radiuses for your CSS projects. Simply adjust the controls and see the real-time preview.
đ Box Shadow
Multiple Layers: Add up to 5 shadow layers for complex effects
Offset X/Y: Control horizontal and vertical shadow position
Blur Radius: Adjust how soft or sharp the shadow appears
Spread Radius: Expand or contract the shadow size
Color & Opacity: Choose shadow color and transparency
Inset: Create inner shadows instead of outer shadows
đĩ Border Radius
Individual Corners: Set different radius for each corner
Quick Set: Use the "All Corners" slider for uniform radius
Presets: Choose from common radius presets
đ Text Shadow
Offset X/Y: Position the text shadow
Blur: Control the softness of the text shadow
Color & Opacity: Customize the text shadow appearance
đž Saving & Exporting
Save Custom Shadows: Name and save your shadow configurations
Copy CSS: Get the CSS code for your design
Export Image: Download the preview as a PNG image
Undo/Redo: Navigate through your changes
đ§ Framework Integration
The generated CSS works with all major CSS frameworks including Bootstrap, Tailwind CSS, Material UI, Chakra UI, and Ant Design.
đĄ API Integration
You can integrate this tool into your application using the CSS output. The generated styles are standard CSS and work everywhere.