The basic shadow makes the text more prominent on the background through horizontal and vertical offsets and blur values; 2. The outer luminous uses multiple layers of white and colored blurred shadows to achieve halo effect, which is suitable for technological design; 3. The depression effect uses the lower right highlight and the upper left shadow to simulate the relief feeling, so that the text seems to be embedded in the background; 4. The neon effect creates luminous text through multiple layers of strong blurred color shadows in the same direction, which is often used in the cyberpunk style; 5. The long projection uses multiple incremental offset blur-free shadows to form oblique long shadows to enhance the three-dimensionality of the text; multiple layers of shadows need to be separated by commas, and the blur and number of layers are reasonably controlled to avoid performance problems. These techniques can be flexibly combined to achieve rich visual effects.

text-shadow property of CSS can add shadow effects to text, which is often used to improve the readability of text, create visual hierarchy, or implement special design styles. Below are some practical and common text-shadow examples suitable for use in different scenarios.

1. Basic Shadow Effect (Single Shadow)

The simplest text shadow makes the text more prominent in the background.

 .text-basic {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-size: 24px;
}

• 2px : Horizontal offset (to the right)
• 2px : Vertical offset (downward)
• 4px : fuzzy radius (larger the more blurred)
• rgba(0,0,0,0.5) : Shadow color (transparent black)

Suitable for light text on dark backgrounds.

2. External glow effect (soft halo)

Create a luminous feeling through blur values, often used in title or neon style designs.

 .text-glow {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00f;
  color: #00f;
  font-size: 36px;
}

• Use multi-layer shadow overlay (separated by commas)
• The first layer: small white halo
• The second layer: wider white halo
• The third layer: blue outer ring, enhances neon feeling

Design suitable for technological and futuristic style.

3. Inset shadow simulation

Although text-shadow does not have an inset, it can simulate the "embedded" sense through direction control.

 .text-emboss {
  color: #aaa;
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
  font-size: 32px;
}

• White shadow on the bottom right: simulate highlights
• Black Shadow on the top left: Simulated Shadow
• Visually like text "pressing" into the background

Commonly used in button and relief style titles.

4. Neon light effect (strong dynamic feeling)

Combining colors and blurs to create luminous text similar to neon tubes.

 .text-neon {
  color: #ffff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #ff00de,
    0 0 20px #ff00de,
    0 0 30px #ff00de;
  font-size: 40px;
  font-weight: bold;
}

• Multi-layer pink and purple blurry stack
• The background is recommended to use dark colors (such as black or dark blue)
• Can achieve flickering effect with animation

Suitable for nightclub style and cyberpunk theme websites.

5. Long projection (long shadow obliquely)

Popular in flat design, giving the text a "stand-standing feeling".

 .text-long-shadow {
  color: #333;
  text-shadow: 
    1px 1px 0 #ccc,
    2px 2px 0 #ccc,
    3px 3px 0 #ccc,
    /* ... Write until about 10px*/
    10px 10px 0 #ccc;
  font-size: 36px;
}

Or it is more convenient to generate using JavaScript, but you can also see the effect by writing a few layers manually.

Note: This effect is more obvious on light backgrounds. It is recommended to use a gray that is a little darker than the background.

Summarize tips

• Multi-layer shadows : Use commas to separate multiple shadow values to achieve complex effects
• Blur value is 0 : can make clear projections or border feels
• Negative offset : Let the shadow go left or up
• Transparent color : rgba(0,0,0,0) can occupy place but not visible (use less)
• Performance Note : Excessive blurring or too many layers may affect rendering performance

Basically these common uses. text-shadow seems simple, but it can produce many amazing effects with creativity. The key is to try different combinations.

The above is the detailed content of css text shadow examples. For more information, please follow other related articles on the PHP Chinese website!