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

Illuminance Converter

Convert illuminance between different units with precision

CPM Calculator

Calculate Cost Per Mille (CPM) for your advertising campaigns with our easy-to-use calculator.

CSS Minifier

Compress and optimize your CSS code with professional precision