CSS - Box Shadow

       
save | reset
Code

Border

px
 


Border Radius

px
 

px
px
px
px

Box Shadow

 

Add more [+]

Background




keyword  
% (percent)  
px (pixel)

%
%
px
px

Text Shadow

 

Add more [+]

Gradient

px px
% %



Add Stopper [+]

Transform





 



Transition


Image Filter

Animation

 


function

CSS Box Shadow Generator

box-shadow property use for display one or more shadows to an HTML element. Shadow can be inside or outside of the box element. Basic syntex of box shadow is following:

box-shadow:<x-position> <y-position> <fade> <spread> <color> <type>;
Supplied arguments are -
1) X position
2) Y position
3) fade - blur distance
4) spread - size of shadow
5) color of the shadow
6) shadow type for select inside or outside of box
You can set multiple shadows to single HTML element by using comma seprate properties.
box-shadow:0px 0px 50px 30px #ff0000, 0px 0px 45px 30px #00ff00 inset;


comments powered by Disqus