Adding shadows to elements and text is simple in CSS3. Use shadows to make certain elements really stand out and give a more natural look to your UI. There are many options for adding shadows, such as size, position, and color. Shadows don't always have to be behind elements and text; they can frame, highlight, and add effects to them too.
In addition to rounded corners, you can add shadows to elements using the new CSS3 box-shadow property. The box-shadow property takes a number of parameters that tells it how to draw the shadow:
box-shadow: h-offset v-offset blur-radius spread-radius color;
Here is an explanation of the parameters:
h-offset: The horizontal offset of the shadow. Negative values put the shadow to the left of the element.v-offset: The vertical offset of the shadow. Negative values put the shadow above the element.blur-radius: Determines the blur amount; the higher the number, the more blur (optional).spread-radius: The size of the shadow. If zero, it's the same size as the blur (optional).color: The color of the shadow (optional).inset: Addinsetto change shadow from outer to inner (optional).
In addition to box shadows, CSS3 has support for text shadows using the text-shadow property. It works nearly identically to box-shadow and uses almost all the same parameters:
text-shadow: h-offset v-offset blur-radius color;
Like box-shadow, you can produce some interesting effects, such as glowing text:
