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

CSS બ્યુટીફાયર

Format and beautify your CSS code with professional precision

CSS મિનિફાયર

Compress and optimize your CSS code with professional precision

સ્ટાઇલસથી CSS કન્વર્ટર

તમારા SCSS કોડને CSS માં રૂપાંતરિત કરો. ઝડપી, સરળ અને સુરક્ષિત.

ડિસ્કાઉન્ટ કેલ્ક્યુલેટર

Calculate discounts, sale prices, and savings with our easy-to-use discount calculator.

SHA-384 હેશ કેલ્ક્યુલેટર

ઝડપથી અને સરળતાથી SHA-384 હેશ પેદા કરો

લોન કેલ્ક્યુલેટર

અમારા વ્યાપક લોન કેલ્ક્યુલેટર સાથે લોન ચૂકવણીઓ, વ્યાજ ખર્ચ અને ઋણમુક્તિના સમયપત્રકની ગણતરી કરો.