✨ CSS Text Effects & Fonts

Master advanced typography with text shadows, effects, and custom fonts

← Back to Content Next Topic: Align & Position →

🎯 Why Text Effects Matter

Typography is a crucial element of web design. CSS3 provides powerful tools to enhance text with shadows, effects, custom fonts, and advanced styling that makes content more engaging and readable.

Text Enhancement Features:

  • ✅ Text shadows for depth and emphasis
  • ✅ Text stroke and outline effects
  • ✅ Gradient and colorful text
  • ✅ Custom web fonts (Google Fonts, @font-face)
  • ✅ Text overflow and ellipsis
  • ✅ Advanced text decoration

🌑 Text Shadow

The text-shadow property adds shadow effects to text, creating depth and visual interest.

Syntax:

/* Syntax: h-offset v-offset blur-radius color */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

/* Multiple shadows */
text-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.5),
    -2px -2px 4px rgba(255, 255, 255, 0.5);

Common Text Shadow Patterns:

/* Simple shadow */
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Glow effect */
.glow {
    text-shadow: 0 0 10px #fff, 0 0 20px #667eea;
}

/* 3D effect */
.text-3d {
    text-shadow: 
        1px 1px 0 #ccc,
        2px 2px 0 #bbb,
        3px 3px 0 #aaa,
        4px 4px 0 #999;
}

/* Outline/Stroke effect */
.outline {
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

/* Neon effect */
.neon {
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #667eea,
        0 0 40px #667eea,
        0 0 80px #667eea;
}

/* Embossed effect */
.embossed {
    color: #ccc;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #999;
}

Text Shadow Examples:

Simple Shadow

Glow Effect

3D Text

Outlined

✏️ Text Stroke

Create outlined text using -webkit-text-stroke property.

/* Text stroke (outline) */
h1 {
    -webkit-text-stroke: 2px #667eea;
    -webkit-text-fill-color: transparent;
}

/* Stroke with fill */
h2 {
    -webkit-text-stroke: 1px #000;
    color: white;
}

/* Thick outline */
.outline-text {
    font-size: 4rem;
    -webkit-text-stroke: 3px #764ba2;
    -webkit-text-fill-color: white;
}

Text Stroke Example:

OUTLINED

🌈 Gradient Text

Create colorful gradient text using background-clip technique.

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

/* Animated gradient text */
.animated-gradient-text {
    background: linear-gradient(
        45deg,
        #667eea, #764ba2, #f093fb, #4facfe
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

Gradient Text Examples:

Purple Gradient

Pink Gradient

Ocean Gradient

🔤 Custom Web Fonts

Use custom fonts from Google Fonts or with @font-face to enhance typography.

Method 1: Google Fonts

/* Step 1: Add to HTML head */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* Step 2: Use in CSS */
body {
    font-family: 'Roboto', sans-serif;
}

/* Multiple fonts */
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans&display=swap" rel="stylesheet">

h1 {
    font-family: 'Montserrat', sans-serif;
}

p {
    font-family: 'Open Sans', sans-serif;
}

Method 2: @font-face (Local Fonts)

/* Define custom font */
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2'),
         url('fonts/mycustomfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Use custom font */
h1 {
    font-family: 'MyCustomFont', sans-serif;
}

/* Multiple weights */
@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

Popular Google Font Combinations:

/* Classic */
h1 { font-family: 'Playfair Display', serif; }
p { font-family: 'Lato', sans-serif; }

/* Modern */
h1 { font-family: 'Montserrat', sans-serif; }
p { font-family: 'Open Sans', sans-serif; }

/* Elegant */
h1 { font-family: 'Cormorant Garamond', serif; }
p { font-family: 'Proza Libre', sans-serif; }

/* Tech/Bold */
h1 { font-family: 'Raleway', sans-serif; }
p { font-family: 'Roboto', sans-serif; }

📏 Text Overflow & Ellipsis

Control how text behaves when it overflows its container.

/* Single line ellipsis */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Multi-line ellipsis (webkit only) */
.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;  /* Number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Clip without ellipsis */
.clip {
    overflow: hidden;
    text-overflow: clip;
}

Text Ellipsis Example:

This is a very long text that will be truncated with an ellipsis when it overflows the container width

🎨 Advanced Text Decoration

CSS3 provides more control over text decorations like underlines.

/* Text decoration properties */
text-decoration-line: underline;  /* or overline, line-through */
text-decoration-color: #667eea;
text-decoration-style: solid;  /* or dotted, dashed, wavy, double */
text-decoration-thickness: 2px;

/* Shorthand */
text-decoration: underline wavy #667eea 2px;

/* Underline offset */
text-underline-offset: 5px;

/* Examples */
.wavy-underline {
    text-decoration: underline wavy #667eea;
}

.thick-underline {
    text-decoration: underline solid #764ba2;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

Text Decoration Examples:

Wavy underline text

Thick underline with offset

Dotted underline

🔠 Text Transform & Formatting

/* Text transform */
text-transform: uppercase;    /* UPPERCASE */
text-transform: lowercase;    /* lowercase */
text-transform: capitalize;   /* Capitalize Each Word */

/* Font variant */
font-variant: small-caps;     /* Small Capitals */

/* Letter spacing */
letter-spacing: 2px;          /* Space between letters */
letter-spacing: -1px;         /* Tighter spacing */

/* Word spacing */
word-spacing: 5px;            /* Space between words */

/* Line height */
line-height: 1.8;             /* Spacing between lines */

Text Transform Examples:

Uppercase text example

capitalized text example

Small Caps Text Example

Letter Spacing Example

📝 Writing Mode

Control the direction and orientation of text flow.

/* Vertical text */
.vertical {
    writing-mode: vertical-rl;  /* Right to left */
    writing-mode: vertical-lr;  /* Left to right */
}

/* Text orientation */
text-orientation: mixed;      /* Default */
text-orientation: upright;    /* All characters upright */
text-orientation: sideways;   /* All characters rotated */

💼 Practical Real-World Examples

Example 1: Hero Title

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(45deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 2px 2px 20px rgba(102, 126, 234, 0.3);
    letter-spacing: -2px;
}

Example 2: Glowing Button Text

.glow-button {
    color: #fff;
    text-shadow: 
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #667eea,
        0 0 40px #667eea;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

Example 3: Elegant Heading

.elegant-heading {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 400;
    color: #333;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.elegant-heading::after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background: linear-gradient(to right, transparent, #667eea, transparent);
    margin: 20px auto;
}

Example 4: Modern Card Title

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.card-title::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: #667eea;
    transition: width 0.3s;
}

.card-title:hover::after {
    width: 100%;
}

Example 5: Neon Sign Effect

.neon-sign {
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #667eea,
        0 0 82px #667eea,
        0 0 92px #667eea,
        0 0 102px #667eea,
        0 0 151px #667eea;
    animation: neonFlicker 1.5s infinite alternate;
}

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #fff,
            0 0 42px #667eea,
            0 0 82px #667eea,
            0 0 92px #667eea,
            0 0 102px #667eea,
            0 0 151px #667eea;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

🎨 Live Examples

Text Shadow Effects:

Simple Shadow

Glowing Text

3D Effect

Gradient Text:

Beautiful Gradient!

Outlined Text:

OUTLINED

📝 Test Your Knowledge - MCQ

Q1: What property creates shadow behind text?

Q2: How do you create gradient text?

Q3: What properties are needed for single-line ellipsis?

Q4: Which property creates outlined text?

Q5: Where do you import Google Fonts?

💪 Practice Questions

  1. Create a heading with a glow effect using text-shadow (at least 3 shadow layers).
  2. Design gradient text that goes from purple (#667eea) to pink (#f093fb) using background-clip.
  3. Add a Google Font (Montserrat) to your page and apply it to all headings.
  4. Create outlined text using -webkit-text-stroke with 2px width and transparent fill.
  5. Make a paragraph that shows ellipsis (...) when text overflows in a 300px wide container.

📌 Summary

  • text-shadow: Adds shadows to text (h-offset v-offset blur color)
  • Multiple shadows: Comma-separated for complex effects (glow, 3D, neon)
  • -webkit-text-stroke: Creates outlined/stroked text
  • Gradient Text: Use background gradient + background-clip: text
  • Google Fonts: Import in HTML <head>, use in CSS font-family
  • @font-face: Load custom local fonts
  • text-overflow: ellipsis: Requires white-space: nowrap + overflow: hidden
  • text-decoration: Enhanced with color, style (wavy, dotted), thickness
  • text-transform: uppercase, lowercase, capitalize
  • letter-spacing: Space between characters
  • font-variant: small-caps: Small capital letters
  • Best Practice: Use web fonts for better typography, add subtle shadows for depth
← Back to Content Next Topic: Align & Position →