CSS shadow generator
Generates box-shadow code using horizontal/vertical movement, opacity, and spread values.
Input
The example value has been entered. Check it immediately or change the value.
Input is processed in the browser. Refreshing returns a sample value.
Result
Check or change the value using the example value result.
Processed only in the browser. Input is up to 50,000 characters, and results appear as non-running text.
Share result
Share the tool link and result text together. No URL is included in the result. Check the below content and then share it.
Calculation·conversion criteria
Create box-shadow code using offset·blur·fuzz.
Input example
0px 4px 12px 0px #000000
width 0, height 4, opacity 8, spread 0: creates a shadow that moves downward. The unit for these values is px.
How to use
- Use the provided example value or replace the horizontal move px, vertical move px, blur px, zoom px, and HEX color fields.
- Click Verify result and check the following result.
- Result can be copied if needed.
Frequently Asked Questions
What is the difference between shadowing and blurriness?
Shadowing increases or decreases the outline of a shadow, while blurriness smooths the edges. Negative shadowing is possible, but the blurriness radius must be 0 or higher. This tool creates a single external shadow.
Calculation criteria and reference materials
- W3C — CSS Backgrounds and Borders
Offset·blur·fuzz of box-shadow
Verification of calculation criteria: · Calculation·verification principles · Report errors