CSS - Text Effects


Text Color

The color property in CSS lets you set the color of text elements. You can specify the text color using formats like color names, hexadecimal values, RGB, and HSL.

To set the text color, use the color property followed by the desired color value.

Example: Setting text color

p {
  color: blue;

All <p> elements will have a blue text color.

CSS provides many predefined color names that you can use, such as red, green, blue, and yellow. For more precise control over colors, you can use hexadecimal values, RGB, or HSL.

Hexadecimal values are represented by a # followed by six characters. Each pair of characters shows the intensity of red, green, and blue components.

  • #ff0000 represents pure red
  • #00ff00 represents pure green
  • #0000ff represents pure blue

RGB values are specified using the rgb() function with three parameters representing red, green, and blue components (each ranging from 0 to 255).

  • rgb(255, 0, 0) represents pure red
  • rgb(0, 255, 0) represents pure green
  • rgb(0, 0, 255) represents pure blue

HSL values are specified using the hsl() function which stands for hue (angle from 0 to 360 degrees), saturation (percentage), and lightness (percentage).

  • hsl(120, 100%, 50%) is for green
  • hsl(240, 100%, 50%) is for blue

Text colors can be inherited by child elements from their parent elements unless explicitly overridden. The cascading nature of CSS also applies to text colors where more specific rules take precedence.

Example: Inheritance and cascading

<div class="parent">
   <p>This text inherits its parent's color.</p>
   <p class="child">This text has its own color.</p>
.parent {
    color: green;

.child {
    color: blue;

The first <p> element will have a green text inherited from the parent <div>. The second <p> element with class "child" will have a blue text due to the specific rule applied.

Text Alignment

The text-align property in CSS lets you control the horizontal alignment of text within an element. You can align text to the left, right, center, or justify it.

To set the text alignment, use the text-align property followed by one of these values: left, right, center, or justify.

Example: Setting Text Alignment

p {
  text-align: center;

In this example, all <p> elements will have their text centered horizontally.

  • text-align: left; aligns the text to the left side of the element. This is the default.
  • text-align: right; aligns the text to the right side of the element.
  • text-align: center; centers the text within the element.
  • text-align: justify; stretches the text to fill up full width of an element, creating even spacing between words.

You can also set direction using properties like direction and unicode-bidi. These are useful for languages with different writing directions like Arabic or Hebrew.

The direction property sets direction while the unicode-bidi property handles bidirectional texts.

Example: Setting Text Direction

p {
  direction: rtl;
  unicode-bidi: bidi-override;

In this example, <p> elements will have their direction set to right-to-left (RTL) using the direction: rtl; declaration. The unicode-bidi: bidi-override; declaration overrides the default bidirectional algorithm for proper display of bidirectional texts.

By combining these properties you can control both horizontal alignment and direction of your content.

Text Decoration

The text-decoration property in CSS allows you to add lines to your text, such as underlines, overlines, or line-throughs. You can control the style, color, and thickness of these decorations.

To add a decoration to your text, use the text-decoration property followed by one or more of these values: underline, overline, or line-through.

Example: Adding Text Decorations

p {
  text-decoration: underline;

h1 {
  text-decoration: overline;

a {
  text-decoration: line-through;

In this example, all <p> elements will have an underline, <h1> elements will have an overline, and <a> elements will have a line-through their text.

You can also combine multiple decorations by separating the values with a space.

Example: Combining Text Decorations

p {
  text-decoration: underline overline;

This will add both an underline and an overline to the <p> elements.

To further control the appearance of the decorations, you can use these properties:

  • text-decoration-line: Specifies the type of decoration (underline, overline, line-through).
  • text-decoration-color: Sets the color of the decoration.
  • text-decoration-style: Determines the style of the decoration (solid, double, dotted, dashed).

Example: Controlling Text Decoration Appearance

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;

In this example, <p> elements will have a red wavy underline.

You can also set the thickness using text-decoration-thickness. It accepts length values or keywords like auto, from-font, or thick.

Example: Setting Text Decoration Thickness

p {
  text-decoration-line: overline;
  text-decoration-thickness: 5px;

This adds a 5-pixel thick overline to <p> elements.

Text Transformation

The text-transform property in CSS lets you change the capitalization of text. You can transform text to uppercase, lowercase, or capitalize the first letter of each word.

To transform text, use the text-transform property followed by one of these values: uppercase, lowercase, or capitalize.

Example: Transforming Text

h1 {
  text-transform: uppercase;

p {
  text-transform: lowercase;

.title {
  text-transform: capitalize;

In this example, all <h1> elements will have their text transformed to uppercase, <p> elements will have their text transformed to lowercase, and elements with the class "title" will have the first letter of each word capitalized.

  • text-transform: uppercase; converts all characters to uppercase.
  • text-transform: lowercase; converts all characters to lowercase.
  • text-transform: capitalize; capitalizes the first letter of each word.

You can apply text transformations to specific elements or classes by targeting them with appropriate selectors.

Example: Applying Text Transformations to Specific Elements

<p>This is a regular paragraph.</p>
<p class="uppercase">This paragraph will be in uppercase.</p>
<p class="capitalize">this paragraph will be capitalized.</p>
.uppercase {
  text-transform: uppercase;

.capitalize {
  text-transform: capitalize;

In this example, the paragraph with the class "uppercase" will have its text transformed to uppercase, while the paragraph with the class "capitalize" will have the first letter of each word capitalized.

Text transformations help maintain consistency in capitalization style for certain elements like headings or buttons without manually typing them in a specific case.

The text-transform property only changes how the text looks and does not alter its actual content. Screen readers and other assistive technologies still read it in its original case.

Text Spacing

CSS provides properties to control the spacing and positioning of text, including letter spacing, word spacing, line height, and vertical alignment.

To adjust the space between characters, use the letter-spacing property. It accepts length values, either positive or negative.

Example: Adjusting Letter Spacing

p {
  letter-spacing: 2px;

.tight {
  letter-spacing: -0.5px;

Positive values increase the space between characters; negative values decrease it. This helps improve readability or create specific typographic styles.

To control whitespace between words, use the word-spacing property. It also accepts length values.

Example: Controlling Word Spacing

p {
  word-spacing: 10px;

.narrow {
  word-spacing: -2px;

Increasing word spacing can help readability for longer texts. Decreasing it can create a more compact look.

The line-height property sets the height of each line of text. It accepts length values, percentages, or unitless values.

Example: Setting Line Height

p {
  line-height: 1.5;

.tall {
  line-height: 200%;

Adjusting line height can improve readability by providing enough vertical space between lines and affects overall visual rhythm.

The vertical-align property controls vertical alignment of inline elements relative to each other or to their container's baseline. Common values include baseline, top, middle, and bottom.

Example: Setting Vertical Alignment

img {
  vertical-align: middle;

.subscript {
  vertical-align: sub;

Vertical alignment is useful for aligning inline items like images or icons with surrounding text.

Text Shadow

The text-shadow property in CSS lets you create shadow effects for text elements. You can specify the shadow's offset, blur radius, and color to achieve various visual effects.

To create a text shadow, use the text-shadow property followed by values representing the horizontal offset, vertical offset, blur radius, and color.

Example: Creating a Basic Text Shadow

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

<h1> elements will have a text shadow with a 2-pixel horizontal offset, a 2-pixel vertical offset, a 4-pixel blur radius, and a semi-transparent black color.

The text-shadow property accepts multiple values separated by commas:

  • Horizontal offset: Specifies the horizontal distance of the shadow from the text. Positive values move the shadow to the right; negative values move it to the left.
  • Vertical offset: Specifies the vertical distance of the shadow from the text. Positive values move it downward; negative values move it upward.
  • Blur radius (optional): Determines how much blur is applied to the shadow. A larger value creates a softer and more diffused effect.
  • Color: Sets the color of the shadow using names or hexadecimal/RGB/HSL values.

Example: Text Shadow with Different Offsets and Colors

p {
  text-shadow: -2px -2px 0 red, 2px 2px 0 blue;

Two shadows are applied to <p> elements: one with red color and negative offsets; another with blue color and positive offsets for a vibrant effect.

Text shadows can improve readability when used against backgrounds with low contrast but use them sparingly as excessive or low-contrast shadows may hinder readability for some users.

Example: Applying Multiple Text Shadows

h2 {
        -3px -3px #ff0000,
         -6px -6px #00ff00,
         -9px -9 px #0000ff;

<h2> elements will have three different colored shadows creating an interesting visual effect.

Text Overflow

CSS provides properties to handle situations where text overflows its container. You can control how the overflowing text is displayed using the overflow, white-space, and text-overflow properties.

The overflow property determines what happens when content exceeds the dimensions of its container. It accepts values such as visible (default), hidden, scroll, or auto.

Example: Handling Text Overflow with Overflow Property

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;

The text inside the .container element will be clipped and hidden from view if it overflows.

The white-space property controls how whitespace and line breaks within an element are handled. The nowrap value prevents text from wrapping, causing it to overflow if it exceeds the container's width.

Example: Preventing Text Wrapping with White-space Property

p {
  white-space: nowrap;

Text inside <p> elements will not wrap to the next line, potentially overflowing the container horizontally.

To truncate overflowing text with an ellipsis (...), you can use the text-overflow property in combination with overflow and white-space.

Example: Truncating Overflowing Text with Ellipsis

.truncate {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

Text inside elements with the class .truncate will be truncated with an ellipsis if it overflows the 200-pixel width.

By setting these properties together (overflow: hidden, white-space: nowrap, and text-overflow: ellipsis) you create a single line of text that gets truncated when it overflows.

To create responsive text containers that adapt to different screen sizes, you can use relative units like percentages or vh/vw units for dimensions.

Example: Creating Responsive Text Containers

.responsive-container {
  width: 100%;
  max-height: 50vh;
  overflow: auto;

The .responsive-container element will have a width of all its parent and a maximum height of half of the viewport height. If the text exceeds this max height, a scrollbar will appear.

Text Wrapping

CSS provides properties to control how text wraps within an element, including white-space, word-wrap, word-break, overflow-wrap, and hyphens.

The white-space property determines how whitespace and line breaks inside an element are handled. It accepts values like normal, nowrap, pre, pre-wrap, and pre-line.

Example: Controlling Text Wrapping with White-space Property

p {
  white-space: nowrap;

.pre {
  white-space: pre;

<p> elements will not wrap text to the next line, causing overflow if the text is longer than the container's width. Elements with the class .pre will preserve whitespace and line breaks as they appear in the source code.

To control if long words should break or overflow, use the word-wrap property. It accepts values like normal (default) or break-word.

Example: Breaking Long Words with Word-wrap Property

p {
  word-wrap: break-word;

Long words inside <p> elements will break and wrap to the next line if they overflow the container's width.

The word-break property specifies how words should break when reaching the end of a line. It accepts values like 'normal', 'break-all', and 'keep-all'.

Example: Breaking Words and URLs with Word-break Property

.url {
  word-break: break-all;

.keep {
  word-break: keep-all;

Elements with the class .url will break words and URLs at any character to prevent overflow. Elements with the class .keep will prevent word breaks between letters, keeping whole words together.

The 'overflow-wrap' property (previously known as 'word-wrap') determines whether a long word should break or overflow when it reaches the container's edge. It accepts values like 'normal' (default) or 'anywhere'.

Example: Wrapping Long Words with Overflow-Wrap Property

p { 
    overflow-wrap: anywhere; 

Long words inside <p> elements can break at any point if necessary to prevent overflow.

To apply hyphens to wrapped text, use the hyphens property. It accepts values like 'none' (default), 'manual', and 'auto'.

Example: Applying Hyphens To Wrapped Text

 p { 
    hyphens: auto;

Wrapped text inside <p> elements will automatically have hyphens inserted at appropriate points if supported by the language and browser.

Using these properties carefully helps maintain an optimal reading experience, considering the content’s language and target browsers.

Text Effects and Techniques

CSS provides properties and techniques that let you create visual effects on text elements. Here are some of these techniques, including creating gradients and patterns on text, applying text stroke, and using text masking and clipping.

To create gradients or apply patterns to text, use the background-clip property with the text-fill-color property. The background-clip property defines how far the background should extend within an element. By setting its value to text, the background will be clipped to the shape of the text.

Creating Gradient Text

Example: Creating Gradient Text

h1 {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;

In this example, the <h1> element will have a gradient background that transitions from red to blue. The background-clip: text; declaration clips the background to the shape of the text, and the text-fill-color: transparent; declaration makes the text transparent so that you can see through it.

Note that these properties are still considered experimental and may need vendor prefixes (-webkit-) for better browser support.

To apply a stroke effect to your texts, use the -webkit-text-stroke property. This lets you specify both width and color of your strokes.

Applying Text Stroke

Example: Applying Text Stroke

p {
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;

In this example, <p> elements will have a black stroke applied with a width of two pixels. The standard version is text-stroke, while WebKit-specific version is prefixed as -webkit-text-stroke.

Text masking and clipping allow you to create shapes by defining a mask or clipping path for your texts. Use clip-path property for creating such paths which define visible areas in texts.

Implementing Text Clipping

Example: Implementing Text Clipping

h1 {
  clip-path: polygon(0% 0%,100% 0%,100%80%,0%100%);

In this example, the <h1> element has its content clipped into polygon shapes defined by coordinates specified in code above. The content remains visible only within the defined path area.

You can also use masks on texts via using mask images acting as alpha channels, determining opacity levels across different parts.

Implementing Text Masking

Example: Implementing Text Masking

p {
  mask-image: url('mask.png');
  mask-size: cover;  
  mask-repeat: no-repeat;

In this example, the <p> elements have masks applied based on the image specified under the 'mask-image' property. The size and repetition are controlled via 'mask-size' and 'mask-repeat' respectively.