css text effects

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)

Similar Posts