Skip to main content

Exploring CSS Text Effects: Shadows, Gradients, and More

CSS Text Effects​

There are many CSS text effects that you can apply to your text to make it more visually interesting.

Here are some examples:

Text Shadow​

The text-shadow property allows you to add a shadow to your text. You can adjust the horizontal and vertical offset, blur radius, and color of the shadow to create different effects.

As an example:

Editor

Loading...

Gradient Text​

The background-clip and text-fill-color properties allow you to create text with a gradient effect.

As an example:

Editor

Loading...

Outline Text​

The text-stroke property allows you to add an outline to your text. You can adjust the width and color of the outline to create different effects.

As an example:

Editor

Loading...

Underline Text​

The text-decoration property allows you to add an underline to your text. You can adjust the color and style of the underline to create different effects.

As an example:

Editor

Loading...

Strikethrough Text​

The text-decoration property also allows you to add a strikethrough to your text. You can adjust the color and style of the strikethrough to create different effects.

As an example:

Editor

Loading...

CSS Text Other Property​

CSS Text Overflow​

The text-overflow property specifies how to handle text that overflows the content area. You can use it to truncate text or show an ellipsis when the text doesn't fit in the available space.

As an example:

Editor

Loading...

In this example:

  • The white-space property is set to nowrap to prevent the text from wrapping.
  • The overflow property is set to hidden to hide any overflowing text.
  • The text-overflow property is set to ellipsis to show an ellipsis when the text overflows.

CSS Word Wrap​

The word-wrap property specifies whether to break words when the text overflows the content area. You can use it to prevent long words from breaking the layout or to force wrapping of long words.

As an example:

Editor

Loading...

In this example:

  • The word-wrap property is set to break-word to allow long words to break and wrap to the next line.

CSS Line Breaking Rules​

The word-break property specifies how to break words when the text overflows the content area. You can use it to control the line breaking rules of non-CJK text.

As an example:

Editor

Loading...

In this example:

  • The word-break property is set to break-all to break words at any point, even within the word.
  • This can be useful for languages that don't have spaces between words, such as Chinese or Japanese.

CSS Writing Modes​

The writing-mode property specifies the direction of the text flow. You can use it to change the direction of the text for languages that are written right-to-left.

As an example:

Editor

Loading...

In this example:

  • We have a div element with a class of "container" that contains a p element with some text.
  • The writing-mode property is applied to the container element with a value of vertical-rl, which means the text will flow vertically from right to left.

You can experiment with different values for the writing-mode property to change the direction of text flow.

Here are some other possible values:

  • horizontal-tb: The default value, which means the text flows horizontally from left to right.
  • vertical-lr: The text flows vertically from left to right.
  • sideways-lr: The text is laid out horizontally, but each line is rotated 90 degrees counterclockwise.
  • sideways-rl: The text is laid out horizontally, but each line is rotated 90 degrees clockwise.