Preview

Box Shadow

Customize me

CSS Output

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

Shadow Controls

Position

0px
4px

Size

6px
-1px

Color

10%

Options

Presets

Soft Shadow

Medium Shadow

Heavy Shadow

Inner Shadow

Sharp Diagonal

Outline Glow

Double Shadow

Lifted Effect

How to Use

Basic Controls

  • Adjust theHorizontal Offsetto move the shadow left or right
  • Adjust theVertical Offsetto move the shadow up or down
  • Increase theBlur Radiusto make the shadow softer
  • Use Spread Radiusto increase or decrease the overall size of the shadow
  • Change theColor and Opacityto customize the shadow appearance

Advanced Features

  • Enable Inset Shadowto create an inner shadow effect
  • Use Multiple Shadowsfor more complex effects
  • Save and loadPresetsfor quick access to your favorite shadows
  • Click Random Shadowfor inspiration
  • Copy the generated CSS code and paste it into your project

Related Tools

Less to CSS Converter

Transform your Less code into CSS. Fast, easy, and secure.

Stylus to CSS Converter

Transform your SCSS code into CSS. Fast, easy, and secure.

CSS Beautifier

Format and beautify your CSS code with professional precision

JSON Minify

Minified JSON reduces the size of your data, which means it can be transferred over the network more quickly

Binary to Decimal

Convert binary code to decimal numbers effortlessly

Convert JSON to XML Effortlessly

Transform your JSON data into structured XML format with a single click. Fast, secure, and completely browser-based.