Skip to main content

Inner box shadow

You can apply inner shadow effects to any HTML elements using inset value on the box-shadow property. Inset shadows are drawn inside the border, above the background but below the content. Syntax : /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold;.

  • Box shadow property with inset to HTML element

    <style>
    .inner-shadow{
        -moz-box-shadow: inset 0.3em 0.3em 1em rgb(0 0 0 / 30%);
        -webkit-box-shadow: inset 0.3em 0.3em 1em rgb(0 0 0 / 30%);
        box-shadow: inset 0.3em 0.3em 1em rgb(0 0 0 / 30%);
    }
    </style>
    

    This is the box-shadow CSS property with inset value which helps you to add shadow inside of HTML elements. You can add content, manage spacing to div, change color code as per your requirement.

    ...

  • Box shadow property with inset on inside and outside of HTML element using RGB

    <style>
    .inner-outer-shadow{
         box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
                  0 0  0 2px rgb(255,255,255),
                  0.3em 0.3em 1em rgba(0,0,0,0.3);
    }
    </style>
    

  • Back to code snippet queries related css