Handytool
Developerუფასოახორციელდება ადგილობრივად

CSS box-shadow generator

Design CSS box-shadow values with live preview — offsets, blur, spread, opacity, and inset.

Preview
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Adjust the sliders to design the shadow — copy the CSS when it looks right.

CSS box-shadow generator შესახებ

Handytool's box-shadow generator gives you sliders for offset, blur, spread, color, and opacity — and a live preview card that updates as you drag. Toggle inset shadows, dial in a color via the picker, and copy the resulting box-shadow CSS declaration straight into your stylesheet. The whole tool runs in your browser; nothing is uploaded.

CSS box-shadow generator მახასიათებელი

  • 01

    Every parameter as a slider

    Horizontal and vertical offsets, blur radius, spread radius, and opacity each have their own slider plus a numeric input — fine-tune by drag, then nudge by keyboard for pixel precision.

  • 02

    Inset shadows supported

    Flip the inset toggle to switch from a drop shadow to an inner shadow — useful for pressed buttons, sunken inputs, and neumorphic surfaces.

  • 03

    Color + opacity, separately

    Pick the base color in any hex value, then adjust opacity independently. The output uses rgba() so the color and alpha stay readable when you copy the CSS.

CSS box-shadow generator ხშირი კითხვები

What does the spread value do?
Positive spread enlarges the shadow in all directions before the blur is applied; negative spread shrinks it. It's useful for tight, defined glows when paired with a small blur.
Can I add multiple shadows?
This generator outputs a single shadow declaration. To layer shadows, copy the value, then paste it twice in your CSS separated by a comma — box-shadow accepts a comma-separated list.
Why is my inset shadow invisible?
Inset shadows draw inside the element, so they need a background color or padding to be visible. They also won't show on transparent or zero-sized elements.
Is the preview pixel-accurate?
Yes — the preview uses the actual CSS box-shadow property on a real element, so what you see is exactly what your stylesheet will render.

დაკავშირებული ინსტრუმენტები

Developer →

სხვა ინსტრუმენტების გამოკვლევა

ყველა ინსტრუმენტი →