CSS Box-Shadow Generator

Design CSS box-shadows visually and copy the code in one click.

#1F2328
Generated CSS
Propertybox-shadow
Value6px 6px 12px 0px rgba(31, 35, 40, 0.35)
box-shadow: 6px 6px 12px 0px rgba(31, 35, 40, 0.35);CSS rule

This generator runs entirely in your browser — your settings never leave your device.

Free to use — premium coming soon

FREE
  • Unlimited use
  • Instant results
  • 100% private
PREMIUM
  • Remove ads
  • Saved presets & bulk export

About the CSS Box-Shadow Generator

The CSS Box-Shadow Generator lets you build a working box-shadow visually and copy the exact declaration into your stylesheet. Instead of guessing pixel values and reloading the browser, you drag sliders or type numbers for horizontal offset, vertical offset, blur, and spread, pick a color and alpha, toggle inset, and watch a live preview update. The property follows the order offset-x, offset-y, blur-radius, spread-radius, then color, with inset as an optional keyword. Only the two offsets are required; everything after is optional. The generator outputs valid CSS you can paste directly, so you skip the trial-and-error of hand-tuning four interacting length values.

Reach for this tool whenever an element needs to look raised, recessed, or separated from its background: cards, buttons, modals, dropdowns, tooltips, focus rings, and image frames. Because box-shadow never affects layout or an element's computed size, you can add, remove, or animate it without triggering reflow or shifting neighboring elements, which makes it ideal for hover and focus states. A common trick is using zero blur with a positive spread (for example, 0 0 0 3px) to draw a crisp border-like ring that, unlike a real border, does not change the box dimensions. The generator makes these patterns one click away.

Under the hood, each value plays a distinct role. Positive offset-x pushes the shadow right and positive offset-y pushes it down; negative values move it left and up. Blur-radius softens the edge, growing larger and lighter as the number rises, and it cannot be negative. Spread-radius expands the shadow when positive and contracts it when negative, before the blur is applied. The color accepts any CSS color and defaults to the element's currentColor if omitted; using rgba or hsla with a low alpha (roughly 0.1 to 0.25) gives the most natural result. Adding the inset keyword flips the shadow inward so the element looks pressed in. You can stack several comma-separated shadows in one declaration, with the first listed shadow painted on top.

This generator runs entirely in your browser. The values you enter and the CSS it produces are never uploaded to a server, so there is nothing to store or transmit and no account required. The output is standard CSS supported by every modern browser, so the declaration you copy will render identically wherever you paste it. The preview is an honest rendering of the same property your browser applies, meaning what you see in the tool is exactly what you will get in production, with no proprietary syntax or vendor lock-in.

Frequently asked questions

What is the correct order of values in box-shadow?

The order is offset-x, offset-y, blur-radius, spread-radius, then color, with an optional inset keyword. Only offset-x and offset-y are required; blur and spread default to 0 if left out, and color defaults to the element's currentColor.

What is the difference between blur and spread?

Blur softens the shadow's edge so it fades gradually, while spread changes the shadow's size before blur is applied. A positive spread makes the shadow larger than the element and a negative spread shrinks it, whereas blur only controls how diffuse the edge looks.

How do I create multiple layered shadows?

Separate each shadow with a comma in a single box-shadow declaration, for example a small sharp shadow plus a larger soft one. The first shadow in the list is painted on top, and two or three layers at different blur values and opacities give a more realistic sense of depth than one shadow.

What does the inset keyword do?

Adding inset turns an outer drop shadow into an inner shadow, making the element look recessed or pressed into the page. Inset shadows are clipped to the element's padding box and sit above the background but below the content.

Does box-shadow change an element's size or layout?

No. A box-shadow is purely a paint effect and never alters the element's dimensions, push neighboring elements, or trigger scrolling. That is why it is safer to animate than width or border and why a spread-only shadow is a popular border alternative that avoids layout shift.

From our blog

Binary, Octal, Decimal, Hex: How Number Bases Actually Work

By the Super Simple Digital Tools Team · Updated June 2026

Every number you have ever written is a positional number, meaning each digit's worth depends on where it sits. In decimal, the rightmost column counts ones, the next counts tens, then hundreds, each column being ten times the one to its right. Change that multiplier and you change the base. Binary multiplies by two per column, octal by eight, and hexadecimal by sixteen. Nothing magical separates these systems; they are simply four ways of grouping the same underlying quantity, and a base converter just rewrites that quantity in a different grouping.

Reading any base into a value follows one rule: multiply each digit by the base raised to its column position and add the results. Hex 2F means 2x16 plus 15x1, which is 47 in decimal (remember F stands for 15). The same rule decodes binary 101101 as 32 plus 8 plus 4 plus 1, or 45. Once you internalize this expansion, no base feels foreign, because the procedure is identical, only the base number you raise to a power changes.

Going the other direction, from a decimal value into another base, uses repeated division. Divide by the target base, keep the remainder, then divide the quotient again, and continue until the quotient hits zero. The remainders, read from last to first, spell out the answer. Converting 156 to hex, for instance, gives 156 divided by 16 as 9 remainder 12, and 12 is C, so the answer is 9C. It is the same loop whether your target is binary, octal, or hex.

The real shortcut lives between binary, octal, and hex, because their bases are all powers of two. One octal digit is exactly three bits and one hex digit is exactly four bits, so you can convert by regrouping rather than calculating. Take binary 11011010, slice it into nibbles 1101 and 1010, and you get D and A, so DA. This is precisely why programmers lean on hex: it is binary wearing a shorter, more readable costume, with each byte always landing as a tidy pair of hex digits.

Those relationships explain where each base earns its keep. Binary is the machine's native language of on and off. Hex shrinks long bit patterns into something a human can scan, which is why color codes, memory addresses, and hashes use it. Octal survives mainly in Unix permissions, where three-bit groups fall naturally into single digits. Decimal stays the language of people. A base converter is the bridge that lets you move a single value across all four worlds without losing a thing.

  • When converting binary to hex, group the bits into fours from the right and pad the leftmost group with leading zeros if it comes up short.
  • Sanity-check a hex-to-decimal result by remembering that two hex digits never exceed 255, the maximum value of one byte.
  • For octal file permissions, translate each digit to three bits: 7 is 111 (rwx), 5 is 101 (r-x), 0 is 000 (---).
  • If a field rejects your input, check the digit set: binary allows only 0 and 1, octal stops at 7, and hex tops out at F.

Read the full guide →

Tool by the Super Simple Digital Tools Team. Reviewed by our editorial team. Free to use, no signup required.

Related tools