• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Text Effects Quiz

Q1: Which property adds a shadow behind the text?

A. box-shadow
B. text-shadow
C. text-color
D. outline

Q2: What does text-overflow: ellipsis; do?

A. Adds "..." when text overflows
B. Scrolls text
C. Hides text
D. Boldens text

Q3: Which white-space value prevents text wrapping?

A. normal
B. nowrap
C. pre-wrap
D. break-word

Q4: Which property allows long words to break into next line?

A. text-align
B. word-wrap
C. overflow
D. spacing

Q5: What does writing-mode: vertical-rl; do?

A. Makes text flow vertically from right to left
B. Adds underline
C. Makes text bold
D. Creates 3D text

Q6: Which property fills text with a gradient using clipping?

A. background-clip: text
B. font-gradient
C. text-fill
D. text-gradient

Q7: What is required to use text-overflow: ellipsis;?

A. padding
B. white-space: nowrap and overflow: hidden
C. font-style
D. display: flex

Q8: Which value of white-space keeps all spaces and line breaks?

A. normal
B. pre
C. nowrap
D. break-all

Q9: Which tag is used to apply animated text shadows?

A. Any tag with animation and text-shadow
B. Only <h1>
C. Only <span>
D. Only <text>

Q10: What does -webkit-text-fill-color: transparent; do?

A. Makes text transparent to reveal background
B. Adds gradient to text
C. Hides background
D. Clips padding
← Previous Next →
Login
Go Back Top