CSS card shadow
Tune a card shadow using offsets, blur, spread and a colour.
CSS card shadow: inputs, results and limitations
Tune a card shadow using offsets, blur, spread and a colour.
How to use CSS card shadow
- Paste your text or use the example to inspect the operation.
- Review the options before running: Horizontal offset: 0 · Vertical offset: 12 · Blur radius: 28 · Spread: 0 · Shadow colour: #102937
- Inspect the preview or result, then download a new file.
An illustrative use case
A soft card shadow using offsets, blur and spread.
Select a real sample file you are allowed to process. Begin with a short, simple input before attempting a complex document or recording.
What to inspect in the output
Compare the preview against your real page background. A shadow can be invisible on a dark surface or misleadingly heavy when the component is small.
Where this tool stops
Review the output before using it. Your original input is not changed.
Settings and starting values
| Control | Starting value |
|---|---|
| Horizontal offset | 0 |
| Vertical offset | 12 |
| Blur radius | 28 |
| Spread | 0 |
| Shadow colour | #102937 |
Troubleshooting CSS card shadow
Inspect the result in the destination component or viewer. A declaration needs a valid CSS context; an image needs suitable dimensions; a sanitized SVG can lose unsupported features.
Questions about CSS card shadow
Does copying the shadow include the entire card design?
No. It supplies the box-shadow declaration. Spacing, borders and typography still come from your CSS.
What input does CSS card shadow need?
Use the sample text shown below, then replace it with your own input. Review the result for the destination where it will be used.
Which options does CSS card shadow provide?
Horizontal offset, Vertical offset, Blur radius, Spread, Shadow colour. Review the starting values in the table and adjust them for your input.
Your original input is preserved. Review the new output before using it in a published page, customer delivery or production workflow.
JavaScript enables the interactive workspace.