ToolXkit Icon

CSS Box Shadow Generator

Build a box-shadow with sliders and copy the CSS.

  • Free
  • No signup
  • Nothing uploaded
  • No watermark

CSS

box-shadow: 0px 10px 25px -5px rgba(15, 23, 42, 0.20);

How to Create a CSS Box Shadow with Sliders

CSS Box Shadow Generator: before and after TEXT A YOUR INPUT CSS BOX SHADOWGENERATOR DONE A RESULT

A good shadow lifts a card off the page without shouting. Getting one right by typing numbers into a stylesheet is slow guesswork, so this generator gives you sliders for every part of the shadow and a white card that shows the effect as you move them.

Adjust the horizontal and vertical offset, the blur, the spread, the colour and its opacity, or tick Inset to draw the shadow inside the box. The box-shadow line is written out below the preview, ready to copy or download as a small CSS file.

No software to install Free Works on any device

Steps to Design a Box Shadow

  1. 1. Set the offset

    Horizontal moves the shadow left or right and Vertical moves it up or down, each from -50 to 50 pixels. A small positive Vertical value looks like light from above.

  2. 2. Soften it with blur and spread

    Blur, from 0 to 100 pixels, feathers the edge. Spread grows or shrinks the shadow before blurring; a negative spread keeps it tucked under the card.

  3. 3. Pick the colour and opacity

    Choose a colour and lower Opacity for a subtle result. Around 10 to 25 percent of a dark navy usually looks more natural than pure black.

  4. 4. Copy or download the CSS

    Press Copy to grab the rule, or Download to save it as styles.css. Tick Inset first if you want a pressed-in look.

Try it now

What Is box-shadow in CSS?

box-shadow is the CSS property that draws a shadow around an element’s frame. It takes an x offset, a y offset, a blur radius, a spread radius and a colour, with the optional word inset at the front. Browsers draw it without any image, and it follows rounded corners automatically.

Why Use Colour and CSS Tools?

Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.

“See it first, then copy the code.”
  • Live previews while you adjust
  • Codes in HEX, RGB and HSL
  • CSS ready to paste
  • Designs checked for colour blindness
  • Palettes that work together
  • Readable text checked for contrast
  • Print colours in CMYK
  • Colours taken from photos

Popular Uses for Colour Pickers and CSS Generators

Designers and site owners use these for the same handful of jobs.

  • Brand colours Build a palette around a logo colour with matching tints, shades and accents.
  • Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
  • Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
  • Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
  • Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
  • Colours from a photo Pull the main colours out of a product photo to match a web page.
  • Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
  • Button styles Design a gradient, glass or soft 3D style button and take the code.

What the Shadow Generator Controls

Offset sliders

Separate horizontal and vertical controls let you place the shadow in any direction, including above or to the left.

Blur and spread

Two sliders shape the softness and size, including negative spread for tight, modern card shadows.

Colour with opacity

Pick any colour and set its transparency; the output uses rgba() so the shadow blends into any background.

Inset option

One tick box moves the shadow inside the element for pressed buttons and sunken input fields.

Copy and download

Take the line straight to your clipboard or save it as a styles.css file for later.

Why Use ToolXkit for CSS Box Shadow Generator?

Your files stay with you

Everything runs inside your browser. Nothing you open or type is uploaded to a server.

Design Tools for Different Users

Designers

Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.

Front-end developers

Generate CSS for gradients, shadows, animations and layouts and check it in a preview.

Design students

Learn how colour harmony and CSS properties work by changing them live.

Small business owners

Pick consistent brand colours for a shop sign, website and social posts.

Print designers

Convert colours for print and work out bleed, trim and pixel sizes.

Accessibility testers

Check contrast ratios and preview designs through different types of colour blindness.

Best Times to Pick Colours and Write CSS

These tools help when you are:

  • Starting a new brand or logo
  • Fixing text that is hard to read
  • Styling a button or card
  • Preparing a flyer for print
  • Matching a colour from a photo
  • Laying out a page with grid
  • Checking a chart for colour blindness
  • Converting a HEX code to RGB

Tips for Natural Shadows

  1. Keep blur about twice the vertical offset. A 10 pixel drop with a 20 to 25 pixel blur reads as soft daylight.

  2. Tint the shadow with a dark version of your background colour instead of black for a warmer, less muddy look.

  3. For a deeper effect, copy two results and join them with a comma in one box-shadow rule: a tight one and a wide soft one.

  4. Check the shadow in dark mode too. A shadow that works on white often disappears on a dark grey page.

Frequently Asked Questions

Answers to common questions about this tool.

What do the four numbers in box-shadow mean?

In order they are the horizontal offset, the vertical offset, the blur radius and the spread radius. For example 0 10px 25px -5px places the shadow 10 pixels down, blurs it over 25 pixels and pulls it in by 5.

How do I make a shadow on only one side?

Offset the shadow towards that side and use a negative spread roughly equal to the blur. For a bottom-only shadow, try 0 8px 8px -8px. The negative spread hides the shadow on the other three edges.

What does inset do?

Inset draws the shadow inside the element instead of outside it, so the box looks pressed into the page. It is often used for text inputs and toggled buttons.

Is it possible to stack several shadows?

CSS allows several shadows separated by commas. This generator builds one at a time, so make each layer here, copy it, and join them in your stylesheet.

Do shadows slow down a website?

A few static shadows cost almost nothing. Very large blurs animated on many elements at once can make scrolling less smooth on older phones, so keep animated shadows modest.

Can I copy the CSS straight into my project?

Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.

Is CSS Box Shadow Generator free for commercial work?

Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.

Why do my screen colours look different when printed?

Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.

What contrast ratio should my text have?

WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.

Do I need to sign in to use CSS Box Shadow Generator?

No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.

Further reading

More Colour & CSS Tools

Other free tools for the same kind of job.

Browse all tools