webdevpuneet.com

Related Snippets

67 in Tools & Calculators category
49–54 of 60

Box Shadow Generator

Color Mixer

Bezier Curve Editor

Color Contrast Checker

Unit Converter

Timezone Converter

Box Shadow Generator — Live CSS box-shadow Builder

Box Shadow Generator · Tools · Plain HTML, CSS & JS · Live preview

CategoryTools & Calculators
TagsClipboard APICSS Grid

Copy & paste

Source Code

<div class="sg-card">
  <div class="sg-stage"><div class="sg-box" id="sgBox"></div></div>
  <div class="sg-controls">
    <label class="sg-ctrl">Offset X <span id="sgxV">0</span><input type="range" id="sgx" min="-40" max="40" value="0"></label>
    <label class="sg-ctrl">Offset Y <span id="sgyV">12</span><input type="range" id="sgy" min="-40" max="40" value="12"></label>
    <label class="sg-ctrl">Blur <span id="sgbV">28</span><input type="range" id="sgb" min="0" max="80" value="28"></label>
    <label class="sg-ctrl">Spread <span id="sgsV">-6</span><input type="range" id="sgs" min="-30" max="30" value="-6"></label>
    <label class="sg-ctrl sg-wide">Opacity <span id="sgoV">0.25</span><input type="range" id="sgo" min="0" max="100" value="25"></label>
    <div class="sg-extra">
      <label class="sg-color">Color <input type="color" id="sgcol" value="#0f172a"></label>
      <label class="sg-inset"><input type="checkbox" id="sgInset"> Inset</label>
    </div>
  </div>
  <code class="sg-css" id="sgCss"></code>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

All shadow params
Offset X/Y, blur, spread, color, opacity, and inset.
Negative values
Offsets and spread go negative for tight or directional shadows.
Hex + opacity to rgba
Combines hue and transparency into valid CSS.
Live preview
The box updates in real time as you adjust.
Inset toggle
Render an inner shadow with one checkbox.
Checkerboard stage
Shows the shadow on any background tone.
Copyable output
One click copies the box-shadow declaration.
No library
Pure HTML/CSS/JS — no generator dependency.

About this UI Snippet

Box Shadow Generator — Visual CSS box-shadow Builder with Live Preview

Screenshot of the Box Shadow Generator snippet rendered live

A box-shadow generator lets you dial in a CSS box-shadow with sliders and instantly see and copy the result — far faster than guessing pixel values by hand. This snippet builds a complete one with offset, blur, spread, colour, opacity, and inset controls over a live preview, in plain HTML, CSS, and vanilla JavaScript.

Every parameter of box-shadow, mapped to a control

CSS box-shadow is offset-x offset-y blur spread color, optionally inset. Each gets its own control: range sliders for the four lengths (with negative offsets and spread allowed), a colour picker, an opacity slider, and an inset checkbox. As you move any of them the preview box updates in real time, so you feel the effect of, say, a negative spread tightening the shadow, rather than reading about it.

Colour and opacity, combined correctly

People think of a shadow as "this colour at this opacity," but CSS wants a single colour value. The generator converts the chosen hex to RGB and combines it with the opacity slider into an rgba(…) string, so you tune hue and transparency independently and get valid CSS out. This is the detail that makes shadows look natural — soft dark shadows are usually a low-opacity near-black, not a grey.

A checkerboard stage

The preview sits on a subtle striped stage so the shadow is visible whether it's light or dark, and the box itself is neutral white with a hairline border so the shadow reads clearly. Inset shadows render inside the box, demonstrating the difference live.

Copyable, paste-ready output

The full box-shadow: …; declaration updates on every change and copies to the clipboard on click — including the inset keyword and the assembled rgba colour — so you go straight from tweaking to pasting into your stylesheet. No mental arithmetic, no trial-and-error reloads.

Self-contained and extensible

It's a single update() function reading the controls and writing the preview and output, with no dependencies. You can extend it to stack multiple shadows (comma-separated) or add presets, but as-is it's a clean, practical reference for the box-shadow generator pattern every CSS toolkit ships.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA shadow generator renders with a live preview box.
  2. 2
    Adjust the slidersSet offset X/Y, blur, and spread; the preview updates live.
  3. 3
    Pick color and opacityChoose a hue and transparency — combined into rgba for you.
  4. 4
    Toggle insetSwitch between an outer and inner shadow.
  5. 5
    Copy the CSSClick the output to copy the box-shadow declaration.
  6. 6
    Tune to tasteSoft shadows are usually low-opacity near-black.

Real-world uses

Common Use Cases

Design system elevation tokens
Author shadow tokens for cards, popovers and modals, copying the exact CSS from a live preview.
Component styling
Dial in shadows for buttons and panels on a glass card or any surface, with offsets and spread going negative for tight results.
Theme editors
Place beside a gradient picker in a theming tool, combining hex colour and opacity into valid rgba() output.
Neumorphism and inset shadows
Craft inner shadows for a neumorphism card using the inset toggle, for pressed and recessed states.
Learning box-shadow
See how each parameter affects the result, from offset X and Y to blur, spread, colour and opacity, in real time.

Got questions?

Frequently Asked Questions

Offset X and Y move the shadow horizontally and vertically (negative values move it left/up). Blur softens the edge — higher is fuzzier. Spread grows or shrinks the shadow before blurring; a negative spread pulls it in, which is the trick behind subtle, tight shadows. The generator lets you feel each of these live rather than guessing values.

CSS box-shadow takes a single color value, but designers think in terms of a color plus a transparency. The generator converts your chosen hex to RGB and merges it with the opacity slider into an rgba() string, so you can adjust hue and alpha independently and still get one valid value. Most natural shadows are a low-opacity near-black rather than an opaque grey.

Tick the inset checkbox. That prepends the inset keyword to the box-shadow, which renders the shadow inside the element instead of outside — useful for pressed buttons, inputs, and neumorphic effects. The preview updates immediately so you can see the inner shadow as you tune the same offset, blur, and spread controls.

CSS supports comma-separated shadows for layered depth, and you can extend this generator to manage a list of shadow objects and join their strings with commas. As shipped it builds a single shadow, which covers most needs; adding a "layers" array and an add/remove UI turns it into a multi-shadow editor without changing the core math.

Hold the shadow parameters in state and compute the box-shadow string as a derived value bound to the preview's style and the output. Two-way bind each slider, the color input, and the inset checkbox to state. Copy via the Clipboard API. Tailwind users can map common results to shadow utilities, or keep the generated value as an arbitrary property.