text-shadow
text-shadow property in CSS3 allows you to apply shadow to your text.
text-shadow property take four arguments:
- First property is the horizontal distance between the text and its shadow. It can have positive or negative value.
- Second property is the vertical distance between the text and its shadow. It can have positive or negative value.
- Third property is the z directional distance between the text and shadow. More distance causes more blur. It has to be positive value. This is optional.
- Last argument is the color of shadow text. This is optional
A text can have multiple shadows. We can provide shadows comma separated.
Check browser support for text-shadow property.
textshadow polyfill can be used to create text shadow in not supported browsers.
box-shadow
box-shadow property allows us to create shadows for any displayed element.
box-shadow property take six arguments:
- First property is the horizontal distance between the box and its shadow. It can have positive or negative value.
- Second property is the vertical distance between the box and its shadow. It can have positive or negative value.
- Third property is the z directional distance between the box and shadow. More distance causes more blur. It has to be positive value. This is optional.
- Four argument is the size of the shadow. This is optional.
- Fifth argument is the color of shadow shadow. This is optional
- When last argument is assigned to “inset” the shadow becomes inner shadow instead of outer shadow(its outer by default).
A box can have multiple shadows comma separated.
Check browser support for box-shadow property.
CSS3 Pie polyfill can used to create box shadow effects in a not supported browser.
Leave a Reply