Prev Next

CSS Text Effects

CSS Text Effects allow you to style and transform text to make it more visually appealing. These effects include shadows, outlines, overflows, decorations, and more.

Key Topics

Text Shadow

The text-shadow property adds shadow effects to text, enhancing its appearance and creating depth.

<style>
        .text-shadow {
            font-size: 24px;
            font-weight: bold;
            color: #007BFF;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
            margin: 20px;
        }
</style>
<p class="text-shadow">This text has a shadow effect.</p>

Explanation: The shadow has a 2px horizontal and vertical offset, a 5px blur radius, and a semi-transparent black color.

Text Overflow

The text-overflow property specifies how overflowed text is displayed, with options like ellipsis or clip.

<style>
        .text-overflow {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid #ddd;
            padding: 10px;
        }
</style>
<div class="text-overflow">This is a long text that will overflow and display an ellipsis.</div>

Explanation: The text is truncated, and an ellipsis (...) is displayed where the overflow occurs.

Text Outline

Text outlines are achieved by combining -webkit-text-stroke with other properties. This adds a border-like effect to the text.

<style>
        .text-outline {
            font-size: 36px;
            font-weight: bold;
            color: white;
            -webkit-text-stroke: 2px black;
            margin: 20px;
        }
</style>
<p class="text-outline">Outlined Text</p>

Explanation: The text is given a 2px black outline while keeping the inside white, creating a striking contrast.

Text Decoration

The text-decoration property is used to apply underlines, overlines, or line-through effects to text.

<style>
        .text-decoration {
            font-size: 18px;
            text-decoration: underline dotted red;
            margin: 20px;
        }
</style>
<p class="text-decoration">This text has a dotted underline.</p>

Explanation: The text is decorated with a red dotted underline, making it stand out.

Key Takeaways

  • Text Shadow: Adds depth and visual interest to text.
  • Text Overflow: Controls how overflowed text is displayed, such as with ellipses.
  • Text Outline: Creates a striking outline effect using -webkit-text-stroke.
  • Text Decoration: Customizes underlines, overlines, and other text embellishments.
Prev Next