10 CSS Text Effects with Examples


CSS text effects can be created by using CSS styles and CSS3 transitions and animations. Here are some ways to create CSS text effects:

  1. Using text-shadow property to add shadows to text for a 3D effect.
  2. Using linear-gradient property to add gradient colors to text.
  3. Using text-stroke property to add strokes (outlines) to text.
  4. Using transform property to rotate, scale, and flip text.
  5. Using animation property to add animation to text.
  6. Using text-transform property to change the case of text.
  7. Using background-clip and background-image properties to add gradient backgrounds to text.
  8. Using @keyframes rule to create a typewriter effect.
  9. Using pseudo-elements (such as ::before and ::after) to add special effects to text.
  1. Text Shadow: Adds a shadow to text for a 3D effect. Example:
h1 {
  text-shadow: 2px 2px #ccc;
}
  1. Text Gradient: Adds a gradient color to the text. Example:
h1 {
  background: linear-gradient(to right, red , yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
  1. Text Stroke: Adds a stroke (outline) to the text. Example:
h1 {
  -webkit-text-stroke: 2px black;
}
  1. Text Rotate: Rotates the text. Example:
h1 {
  transform: rotate(30deg);
}
  1. Text Scale: Scales the text size. Example:
h1 {
  transform: scale(1.5);
}
  1. Text Flip: Flips the text horizontally or vertically. Example:
h1 {
  transform: scaleX(-1);
}
  1. Text Animation: Adds animation to text. Example:
h1 {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
  1. Text Transform: Changes the case of the text. Example:
h1 {
  text-transform: uppercase;
}
  1. Text Gradient Background: Adds a gradient background color to text. Example:
h1 {
  background-image: linear-gradient(to right, red , yellow);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
  1. Text Typewriter: Makes the text look like it’s being typed. Example:
h1 {
  overflow: hidden;
  border-right: 0.15em solid orange;
  white-space: nowrap;
  animation: typing 2s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

h1 is an HTML tag that represents a heading element on a web page. It is used to define the main heading of a document or section, and is typically the largest and most prominent heading in a document. h1 tags are usually used as the title of a page or as the main heading of a section of content. The text inside the h1 tag is usually displayed in a larger font size and with a bold style, to emphasize its importance and give structure to the content.

5/5 (2)
Tags: