🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

REFERENCEcss

css Documentation

📖 INDEX

# Align-content

# Animation-delay

# Animation-duration

# Animation-timing-function

# Background-color

# Background-image

# Background-position

# Background-repeat

# Background-size

# Basic-Selectors

# Child-Selectors

# Class-Selectors

# CSS-Attribute-Selectors

# Descendant-Selectors

# Flex-direction

# Grid-template-areas

# Grid-template-columns

# Grid-template-rows

# Include-Css-in-Html

# Justify-content

# Justify-items

# Letter-spacing

# Media-queries

# Pointer-events

# RefDeviceCharacteristics

# RefDimensions

# RefScreenDimensions

# Siblings-Selectors

# Text-transform

# Top, Right, Bottom, Left

# Transition-delay

# Transition-duration

# Transition-timing-function

# Universal-Selectors

# Including-Css-in-Html

LOADING ENGINE...

CSS Text Shadow

Add depth and style to your typography. Learn how to control offsets, blur radius, and layer multiple shadows.

style.css

h1 {

font-size: 3rem;

color: #fff;

text-shadow: 4px 4px 0 #000;

}

SHADOW

styles.css

1 / 10

🌚

Tutor:The text-shadow property adds shadow to text. It accepts a list of shadow effects, separated by commas.

⭐ 0 EXP

CSS Mastery Tree

Unlock nodes by learning offsets, blur, and layering.

Concept 1: Offsets

The first two values in text-shadow control position. X (horizontal) and Y (vertical). Positive X moves right, positive Y moves down.

System Check

Which value moves the shadow downwards?

Positive XNegative XPositive YNegative Y

Community Creations

Share Neon Effects

Designed a cool glowing text? Share your text-shadow configuration.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Text Shadow

Pascual Vila

Frontend Instructor.

The text-shadow property adds shadow to text. It accepts a comma-separated list of shadows to be applied to the text and its `text-decoration`.

Shadow Values

The syntax usually follows this order:

offset-x: Horizontal distance. Positive moves right.
offset-y: Vertical distance. Positive moves down.
blur-radius: (Optional) The higher the value, the bigger and lighter the blur.
color: (Optional) The color of the shadow.

Layering Shadows

You can create interesting effects like 3D text or neon glows by layering multiple shadows. Simply separate each shadow group with a comma.

Text Shadow Glossary

Offset X: The horizontal distance of the shadow. Negative values place the shadow to the left of the text.
Offset Y: The vertical distance of the shadow. Negative values place the shadow above the text.
Blur Radius: Defines how sharp or diffuse the shadow is. A value of 0 produces a sharp edge.