Create beautiful CSS gradients visually. Adjust colors, angle, and type, then copy the CSS code. Supports linear and radial gradients.
Box Shadow
Create CSS box shadows visually. Adjust offset, blur, spread, and color, then copy the CSS code. Real - time preview included.
Getting box - shadow values right by trial and error in a code editor is slow. A visual generator lets you dial in the exact shadow you want and grab the CSS instantly.
How to use
- Adjust horizontal and vertical offset with the sliders
- Set blur radius and spread radius
- Pick a shadow color and opacity
- Toggle inset if needed, then copy the CSS
Privacy and processing
Everything runs in your browser. No data is sent to any server.
Frequently Asked Questions
What properties can I customize?
You can adjust horizontal offset, vertical offset, blur radius, spread radius, shadow color, opacity, and toggle inset mode.
Can I create multiple shadows?
The tool generates a single shadow value. You can combine multiple generated values in your CSS by separating them with commas.
What is the inset option?
Inset creates an inner shadow instead of an outer shadow. It's useful for creating pressed or recessed effects on buttons and cards.
How do I copy the CSS?
Click the 'Copy CSS' button to copy the complete box - shadow property to your clipboard, ready to paste into your stylesheet.
Does this work with all browsers?
Yes, box - shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge.
What are good shadow values for cards?
A subtle card shadow typically uses small offsets (0 - 4px), moderate blur (8 - 24px), and a light color like rgba(0,0,0,0.1).
Can I use rgba colors?
Yes, the color picker lets you choose any color, and the generated CSS uses rgba format for transparency control.
Does this work offline?
Yes, once loaded, the generator works entirely in your browser.