Lynxsia IT Solution

CSS Box Shadow

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

					 
        
          /* Keyword values */
          box-shadow: none;

          /* offset-x | offset-y | color */
          box-shadow: 60px -16px teal;

          /* offset-x | offset-y | blur-radius | color */
          box-shadow: 10px 5px 5px black;

          /* offset-x | offset-y | blur-radius | spread-radius | color */
          box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

          /* inset | offset-x | offset-y | color */
          box-shadow: inset 5em 1em gold;

          /* Any number of shadows, separated by commas */
          box-shadow: 3px 3px red, -1em 0 0.4em olive;

          /* Global values */
          box-shadow: inherit;
          box-shadow: initial;
          box-shadow: revert;
          box-shadow: revert-layer;
          box-shadow: unset;

Test Code Online

Inner Shadow

The inset parameter changes the shadow from an outer shadow (outset, default) to an inner shadow.

					 
        
          box-shadow: 10px 10px 5px lightblue inset;

Test Code Online

Smooth Shadow

To create smooth shadow use multiple shadow separated by comma.

					 
        
          box-shadow: 3.4px 3.4px 3.8px rgba(0, 0, 0, 0.03),
                      8.7px 8.7px 9.6px rgba(0, 0, 0, 0.021),
                      17.7px 17.7px 19.5px rgba(0, 0, 0, 0.017),
                      36.5px 36.5px 40.2px rgba(0, 0, 0, 0.013),
                      100px 100px 110px rgba(0, 0, 0, 0.009);

Test Code Online

View CSS PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on: