Create a CSS shadow with offsets, blur and opacity.
Use the example inputs or enter your own values.
Your input is processed in this browser.
Creates a black rgba shadow from your geometric values and percentage opacity.
Enter horizontal offset (px), vertical offset (px), blur (px), spread (px), opacity (%). Update the result, inspect it, then copy or download the output. Reset restores the example inputs so you can start a new calculation.
Example inputs: Horizontal offset (px): 0 · Vertical offset (px): 12 · Blur (px): 30 · Spread (px): 0 · Opacity (%): 12.
Shadows can affect paint cost and visual clarity. Keep contrast independent of the shadow.
The tool does not connect to your website, change your hosting or install anything in WordPress. Any output must be applied separately in the intended environment.
No. This tool works in a modern browser with JavaScript enabled. Your inputs are not submitted to a server by the tool.
Use Copy for the textual result or Download for a local file. Image tools download a generated image when one is available.
No. It produces a result for you to review. Production changes remain a separate step.
Explore related tools for the next part of your website task, or discuss a project if you need help applying the result.
Discuss a project