Text Effects

Text shadows, gradients, clipping, masks, and decorative text.

Overview

CSS text effects create visually appealing typography.

Key Concepts

• text-shadow — Shadow effects
• background-clip — Gradient text
• text-fill-color — Transparent text
• clip-path — Text clipping
• text-decoration — Decorative lines

Code Examples

/* Text shadow */
.shadow-light {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.shadow-glow {
  text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
}

.shadow-3d {
  text-shadow: 
    1px 1px 0 #ddd,
    2px 2px 0 #ccc,
    3px 3px 0 #bbb,
    4px 4px 0 #aaa;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Outline text */
.outline-text {
  -webkit-text-stroke: 1px #000;
  color: transparent;
}

/* Text with background */
.text-bg {
  background: var(--primary);
  color: white;
  padding: 0.25em 0.5em;
  display: inline-block;
}

/* Decorative underline */
.fancy-underline {
  text-decoration: none;
  background-image: linear-gradient(var(--primary), var(--primary));
  background-size: 100% 2px;
  background-position: bottom;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}

/* Animated underline */
.animated-underline {
  text-decoration: none;
  position: relative;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.animated-underline:hover::after {
  width: 100%;
}

/* Text mask */
.mask-text {
  background: url('/image.jpg') center/cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Vertical text */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Text rotation */
.rotated {
  transform: rotate(-45deg);
  transform-origin: center;
}

/* Responsive text */
.fluid-text {
  font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
  line-height: 1.5;
}

/* Truncate with ellipsis */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multiline truncate */
.multiline-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Practice

Create a hero section with gradient text and decorative effects.