CSS text effects can be created by using CSS styles and CSS3 transitions and animations. Here are some ways to create CSS text effects:
- Using text-shadow property to add shadows to text for a 3D effect.
- Using linear-gradient property to add gradient colors to text.
- Using text-stroke property to add strokes (outlines) to text.
- Using transform property to rotate, scale, and flip text.
- Using animation property to add animation to text.
- Using text-transform property to change the case of text.
- Using background-clip and background-image properties to add gradient backgrounds to text.
- Using @keyframes rule to create a typewriter effect.
- Using pseudo-elements (such as ::before and ::after) to add special effects to text.
- Text Shadow: Adds a shadow to text for a 3D effect. Example:
h1 {
text-shadow: 2px 2px #ccc;
}
- 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;
}
- Text Stroke: Adds a stroke (outline) to the text. Example:
h1 {
-webkit-text-stroke: 2px black;
}
- Text Rotate: Rotates the text. Example:
h1 {
transform: rotate(30deg);
}
- Text Scale: Scales the text size. Example:
h1 {
transform: scale(1.5);
}
- Text Flip: Flips the text horizontally or vertically. Example:
h1 {
transform: scaleX(-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);
}
}
- Text Transform: Changes the case of the text. Example:
h1 {
text-transform: uppercase;
}
- 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;
}
- 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 theh1
tag is usually displayed in a larger font size and with a bold style, to emphasize its importance and give structure to the content.