Aisha K.
Mar 12, 2026
Clean layout and the results update instantly. Exactly what I needed for a quick planning check.
Unit Converters
CSS Box Shadow to Code Generator
box-shadow: [inset] offsetX offsetY blur spread rgba(0,0,0,a);
box-shadow: x y blur spread rgba(...). Soft UI is usually 0 8px 24px at 12–20% black. Inset is a checkbox, not a different physics. Multiple shadows mean more declarations, not a larger spread.
Offsets
box-shadow
0px 8px 24px 0px rgba(0, 0, 0, 0.12)
Paste into CSS.
Plain-English guide
Terms & how it works
Confused by a field? Read the short definitions here while you use the tool.
Offsets and blur
The “Offsets and blur” value used in this tool’s formula. Adjust it to see results update live.
How this calculator works
box-shadow: x y blur spread rgba(...). Soft UI is usually 0 8px 24px at 12–20% black. Inset is a checkbox, not a different physics. Multiple shadows mean more declarations, not a larger spread. box-shadow: [inset] offsetX offsetY blur spread rgba(0,0,0,a); Example: 0 8px 24px 0 rgba(0,0,0,0.12) is a polite card lift.
box-shadow: [inset] offsetX offsetY blur spread rgba(0,0,0,a);
Example: 0 8px 24px 0 rgba(0,0,0,0.12) is a polite card lift.
When to use this CSS Box Shadow
Common use cases
- box-shadow: x y blur spread rgba(...). Soft UI is usually 0 8px 24px at 12–20% black. Inset is a checkbox, not a different physics. Multiple shadows mean more declarations, not a larger spread.
- Sanity-check with this case: 0 8px 24px 0 rgba(0,0,0,0.12) is a polite card lift.
- The relationship is: box-shadow: [inset] offsetX offsetY blur spread rgba(0,0,0,a);
Localized examples
- Unit Converters: the example on this page uses the same formula as the widget.
What you get
- Fields: Offsets and blur
- box-shadow: [inset] offsetX offsetY blur spread rgba(0,0,0,a);
- Example on the page: 0 8px 24px 0 rgba(0,0,0,0.12) is a polite card lift.
How to Convert CSS Box Shadow Step-by-Step
- 1Enter Offsets and blur. Use the values you have, not a catalog average, unless that is all you know.
- 2box-shadow: [inset] offsetX offsetY blur spread rgba(0,0,0,a);
- 3Worked case: 0 8px 24px 0 rgba(0,0,0,0.12) is a polite card lift.
- 4Check which dictionary the other person is using — US or UK, decimal or 1,024 — then trust the number.
Governing formula
box-shadow: [inset] offsetX offsetY blur spread rgba(0,0,0,a);
0 8px 24px 0 rgba(0,0,0,0.12) is a polite card lift.
Example: set Offsets and blur = 4, then read the result.
Variable definitions
- value
Offsets and blur
The “Offsets and blur” field. Default 4; typical range -50–80.
- The conversion (box-shadow: [inset] offsetX offsetY blur spread rgba(0,0,0,a);) does not pick US vs UK gallons, SI vs binary megabytes, or Mach at altitude for you. Read the footnote on the page.
- Nothing here is uploaded for the calculation itself.
Frequently Asked Questions
Follows alpha. box-shadow follows the border box. Logos often want filter.
Related calculators
Unit Converters
- Aspect RatioHeight = width × (ratio height / ratio width). 1920×1080 is 16:9. Instagram’s 1:1 is a crop, not a camera sensor. Letterboxing is you refusing to crop.
- Centuries to YearsA century is 100 years. Multiply. History essays already know this; the page exists because search boxes do not. Two centuries is 200 years. We use the same Julian year as the years-to-days tool if you chain them.
- Gibibytes to Gigabytes1 GiB = 2³⁰ bytes. 1 GB = 10⁹ bytes. Multiply GiB by 1.073741824. A 931 GiB “1 TB” disk is the classic unboxing surprise: 1,000,000,000,000 bytes ≈ 931 GiB.
- Gigabytes to TerabytesNAS shelves and video libraries. Divide GB by 1,000 for decimal TB. 4,000 GB is 4 TB on the box. macOS 10.12+ also uses decimal; older Windows “TB” was often tebibytes. Know which UI you are reading.
- Grid Column WidthColumn = (container − gap × (columns − 1)) / columns. A 12-column 1200 px grid with 16 px gutters is 84 px columns. Bootstrap’s 30 px gutter era is why old comps look airy.
- HSL to HexHSL is how humans tweak a brand blue: keep H, drop L for a hover. Hex is what CSS still loves. Saturation and lightness are 0–100%. Hue wraps at 360.
Get a note when we add a planner
Occasional email when something new is worth opening. We never share your address. Unsubscribe anytime.
Discover & search
Explore More Tools
Related tools in Unit Converters — strengthening topical internal links.
Same category · 3 tools
Browse all →Meters to Kilometers
Unit Converters
A 5K is 5,000 meters, not 5 kilometers on the nose if your watch is sloppy. Divide meters by 1,000. Track races, building plans, and “how far was that hike” all live in this split.
Feet to Meters
Unit Converters
US height, ceiling height, and lumber still arrive in feet. Meter plans do not. One foot is exactly 0.3048 m — not “about a third.” Use this when a listing says 10 ft ceilings and the architect works in meters.
Inches to Centimeters
Unit Converters
Monitor diagonals, waist measurements, and photo prints still come in inches. Clothing charts in Europe come in cm. Multiply inches by 2.54. That factor is exact, not a kitchen guess.
Community
Reviews & Ratings
See what others think about this tool, then leave your own rating to help improve CalculioHub.
4.8
out of 5.0
4 reviews
Daniel R.
Feb 28, 2026
Very usable on mobile. Would love a save/export option later, but the math feels solid.
Priya S.
Feb 3, 2026
The FAQ section answered my questions before I even had to search. Smooth dark mode too.
Marcus L.
Jan 19, 2026
Simple inputs, clear outputs. This replaced three bookmarks I used to juggle.
Improve this tool
Suggestion Box
Share an idea, report a bug, or send general feedback for CSS Box Shadow. Your input helps shape what we build next.