• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Text Effects

← Previous Next →

🔹 What Are CSS Text Effects?

CSS Text Effects are techniques that enhance the appearance of text visually using properties like:

  • text-shadow

  • text-overflow

  • word-wrap

  • writing-mode

  • direction

  • white-space

  • And others

These effects help make text more visually appealing, readable, or stylized.

🔸 1. text-shadow

Adds shadow to text.

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Format:
text-shadow: horizontal-offset vertical-offset blur-radius color;

🔸 2. text-overflow

Specifies how overflowed text is handled.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

🟢 Adds ... when text is too long to fit.

🔸 3. white-space

Controls how white space and line breaks are handled.

p {
  white-space: nowrap;   /* or pre, pre-wrap, normal */
}

🔸 4. word-wrap or overflow-wrap

Breaks long words into the next line.

p {
  word-wrap: break-word;  /* or overflow-wrap: break-word; */
}

🔸 5. writing-mode

Changes the direction of the text flow.

p {
  writing-mode: vertical-rl;
}

🟢 Supports vertical or horizontal text orientation.

🔸 6. Gradient Text Effect (With Background Clip)

h1 {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

🟢 Creates colorful gradient-filled text.

🔸 7. Animated Text Shadow

h2 {
  text-shadow: 0 0 5px red;
  animation: glow 1s infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 5px red; }
  to { text-shadow: 0 0 20px yellow; }
}

Practice Questions

Q1. Add a shadow to an <h1> text.

Q2. Use ellipsis when text overflows a paragraph.

Q3. Prevent line breaks in a single-line text block.

Q4. Apply word-wrap to break long words.

Q5. Display text vertically from top to bottom.

Q6. Create gradient-colored text using background-clip.

Q7. Animate text shadow with two colors.

Q8. Add multiple layered shadows for depth.

Q9. Limit text to a single line and show ellipsis.

Q10. Create glowing text using @keyframes.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top