How to create inner shadow in CSS3

The CSS3 property box-shadow combined with the value ‘inset’ is the ideal solution for people who have created an HTML element and would like to add inner shadow. To apply this functionality you should use the standard box-shadow format and simply add the word ‘inset’. Similar to the box-shadow property proper inner shadow display in Firefox, Safari and Chrome can only be achieved by making use of moz-box-shadow and –webkit-box-shadow. Please find below a clear example of a CSS3 inner shadow creation:

.paragraph{
box-shadow: inset 5px 5px 10px #000;
-webkit-box-shadow: inset 5px 5px 10px #000;
-moz-box-shadow: inset 5px 5px 10px #000;
}


Was this useful?