The shadow effect Box-shadow and Text-shadow of CSS3

Source: Internet
Author: User

In this article, we're going to talk about the Box-shadow and Text-shadow properties that are often used in CSS3 to develop page blur shading effects.

In the front-end development process, we often see this effect:

  1. Shadow

This shadow effect is implemented using the Css3box-shadow property.


The Box-shadow property adds one or more shadow effects to the box element.

    • Syntax:

      box-shadow: [inset] X-offset y-offset [blur] [spread] [color];

    • Properties

Property explanation
x-offset required, horizontal shading Offset, which can be negative.
y-offset > necessary, vertical overcast. Shadow offset, which can be a negative number.
blur optional, shaded blur radius, not is negative.
spread > optional, shaded extension radius, can is negative.
optional, shadow color

Shadow Offset

The Box-shadow shadow offset can be positive and negative, and the right or bottom offset is positive, as follows:

    • Positive horizontal offset Shadow

    • Negative horizontal offset Shadow

    • Positive vertical Offset Shadow

    • Negative vertical offset Shadow

Fuzzy radius

    • Positive Blur radius Shadow

    • Box-shadow does not support negative blur radius

Extension radius

    • Positive extension radius

      Extending the radius of the shadow outward

    • Negative extension radius

      Negative extension radius inward contraction shadow radius


The Text-shadow property sets a shadow to the text.

    • Syntax

      text-shadow:x-offset y-offset blur color;

    • Properties

Property Description
X-offset Required, horizontal shadow offset, which can be negative.
Y-offset Required, the shadow offset in the vertical direction, which can be negative.
Blur Optional, shaded blur radius, not negative.
Color Optional, shadow color

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.