css text effects
80+ Collection of CSS Text Effects
Explore a vast collection of over 70 creative CSS text effects, all completely free and open-source. This selection includes a variety of text effects like typing animations, hover interactions, rotating text, and dynamic background effects. Each example comes with HTML and CSS code, allowing you to easily incorporate them into your projects.
Related Articles
Lightness text effect example
Source Code / Demo
ViewMade With
HTML / CSS (SCSS)
This text style offers a striking visual effect: when you hover over the individual letters, they smoothly translate upwards with a seamless transition. Each letter also features a reflective effect, adding depth and a polished look. The combination of motion and reflection creates a captivating, modern appearance that grabs attention and enhances the overall user experience.
Author
KaiCreated on
September 24, 2021CSS Pre-processor
SCSSButter effect example
Source Code / Demo
ViewMade With
HTML / CSS
This text style features color effects that create a smooth, buttery feel, which will amaze the visitors of your website.
Author
NANOUUCreated on
December 1, 2021Sweet Stuff
Source Code / Demo
ViewMade With
HTML / CSS (SCSS)Author
Mireille TijdemanCreated on
December 22, 2021CSS Pre-processor
SCSS3D Paper Text
Source Code / Demo
ViewMade With
HTML / CSS
This text features a stunning 3D paper effect on hover, creating an eye-catching and attractive experience for visitors. You can use this unique heading effect to enhance your website’s appeal.
Author
G'MariemCreated on
June 9, 2022CSS-Only Text Shader
Source Code / Demo
ViewMade With
HTML / CSS / JS
In this heading style, a background image is used as the text color, creating an impressive visual effect. You can customize this code to suit your needs by changing the image and modifying the text design
Author
Robb OwenCreated on
July 7, 2022JS Pre-processor
YesSliced Text Effect
Source Code / Demo
ViewMade With
HTML, CSS
The Sliced Text Effect creates the illusion of text being split into two sections, typically using CSS transforms and clip-path. It adds a modern, dynamic look, perfect for grabbing attention in headings or banners.
Author
Shireen TajCreated on
September 16, 2022CSS Text Hover
Source Code / Demo
ViewMade With
HTML, CSS
This heading text style features a box shadow effect, which is smoothly removed when you hover over it. The transition is seamless, creating a clean and polished hover interaction.
Author
Gayane GasparyanCSS Hover Decorations
Source Code / Demo
ViewMade With
HTML, SCSS
This heading style has a text outline as the color, with the inside being transparent. When you hover over the outlined text, it transitions to its original color, which is black by default.
Author
Adriana HasbunCSS Pre-processor
SCSSText Reflect Effect
Source Code / Demo
ViewMade With
HTML, SCSS
In this code snippet, multiple headings are used, and each heading has a unique reflection style with different reflection color.
Author
ChokcocoCSS Pre-processor
SCSSChromatica Sonnet Interlude
Source Code / Demo
ViewMade With
HTML, SCSS
This effect is created using HTML and CSS, offering a unique presentation of text by displaying overlapping text in different directions
Created on
H OusleyCSS Pre-processor
SCSSCSS Only Grainy Text
Source Code / Demo
ViewMade With
HTML, CSS
This CSS code adds a textured style to the headings, creating a unique visual effect.
Author
Temani AfifPure CSS Text Effect
Source Code / Demo
ViewMade With
Pug, SCSS
So far, this is the best text effect, featuring multiple text styles in a single element. For example, it combines solid and outline text styles, creating a unique look.
Author
Ana TudorCSS Pre-processor
SCSSHTML Pre-processor
PugCut Out Typography
Source Code / Demo
ViewMade With
HTML, CSS
In this Cut Out Typography effect, multiple heading tags are used to display a variety of heading styles. Different backgrounds are applied, appearing as lines behind the heading tags.
Author
Lia TsernantCreated on
October 25, 2018Peeled Text Transforms
Source Code / Demo
ViewMade With
HTML, Stylus
The Peeled Text Transform effect creates the illusion of text peeling from the background, using CSS transform and rotate properties. This adds depth and a 3D-like look, ideal for eye-catching headings.
Author
Zoë Bijl (Michiel)Created on
November 23, 2014Happy Text
Source Code / Demo
ViewMade With
HTML, CSS
In this effect, each letter of the heading is styled with a different color, creating a multi-colored text scheme. Additionally, a bounce effect is applied to the text in a continuous loop.
Author
Bennett Feely (bennettfeely)Created on
November 10, 2012CSS Perspective Text Hover
Source Code / Demo
ViewMade With
HTML, SCSSAuthor
James Bosworth (bosworthco)Created on
August 14, 2016Second Shadow Text Effect
Source Code / Demo
ViewMade With
HTML, CSS
In this, with the use of css a perfect text shadow is applied to the text heading and feel free to use this in you next project.
Author
Code School (codeschool)Created on
April 13, 2016Shaded Text
Source Code / Demo
ViewMade With
Pug, SCSS, JS
In this effect, multiple headings are used, and SCSS is applied to add versatile shading around the headings. The text shade also animates when hovered over, creating a dynamic visual effect.
Author
Rafael González (rgg)Created on
September 16, 2016CSS Pre-processor
SCSSBackground Clipping Covfefe
Source Code / Demo
ViewMade With
HTML, SCSS
To style this heading, a linear gradient background is used and applied as the text color using the CSS background-clip property.
Author
Stephanie (ramenhog)Created on
May 31, 2017Moving Cloud Text | HTML + CSS
Source Code / Demo
ViewMade With
HTML, CSS
this heading has a clouds background image as a text color and also have keyframe animation which works continuously and give feel as a clouds are moving inside the headings.
Author
Cameron Fitzwilliam (CameronFitzwilliam)Created on
March 4, 2018CSS Hover Effect Using Sass Loops example
Source Code / Demo
ViewMade With
Pug, Sass
this heading text has a very beautiful hover effect as when you hover over the heading all the letters wrapped in gray background color with some rotations effect which works smoothly.
Author
Charlie Marcotte (FUGU22)Created on
August 16, 2017CSS Pre-processor
SassGSAP Text Reveal Animation
Source Code / Demo
ViewMade With
Pug, SCSS, JS
This heading effect feels refreshing when you reload the page or navigate to specific sections, as the heading tags are revealed with different overlapping color effects.
Author
Artur Sedlukha (sedlukha)Created on
July 15, 2017CSS Pre-processor
SCSSJS Pre-processor
NoneHTML Pre-processor
PugBlazing Fire
Source Code / Demo
ViewMade With
HTML, CSS
The Blazing Fire effect makes the text look like real fire by applying a fiery color scheme. Additionally, it includes a blowing effect that enhances the realism of the fire effect.
Author
Makan (makan)Created on
February 24, 2015SVG Text Animation
Source Code / Demo
ViewMade With
HTML, CSS, JS
In this effect, an SVG is used to create a transparent design that is filled with different colors. The addition of a bounce effect makes this effect even more attractive.
Author
Cassie Evans (cassie-codes)Created on
July 17, 2017Popout Text
Source Code / Demo
ViewMade With
HTML, SCSS
The Popout Text effect changes the position of each word in the heading using keyframe animation, while also displaying a reflected version of each word with a different color scheme.
Author
Nathan Taylor (nathantaylor)Created on
September 14, 2017Text Line Animation
Source Code / Demo
ViewMade With
HTML, Less, JS
For this html and css(Less) is used to create this amazing svg effect by adding a color with the smooth transition.
Author
John Healey (jhealey5)Created on
September 25, 2017CSS Pre-processor
LessJS Pre-processor
YesReload to Play Again
CSS Typing text Animation
CSS typing text animation creates a visually appealing effect where text appears to be typed out character by character, mimicking the look of a typewriter. This animation can enhance user engagement on websites and is often used for headers, slogans, or any text that needs to capture attention.
Author
Raúl BarreraCreated on
December 21, 2015CSS Pre-processor
SCSSCSS Only Typewriter Text Animation
This typing effect worked with multiple texts with various writing styles to complete the remaining text, along with different indicators for the writing lines.
Author
Alvaro MontoroCreated on
August 27, 2021writing-mode
The writing-mode property in CSS write the text or headings in different directions direction. It can set vertical, horizontal, or mixed flow for text, useful for languages like Japanese, Chinese, or creating unique layouts.
Author
Ollie Williamsscss text animation wave
The wave text animation in SCSS creates a smooth, sinusoidal motion across individual letters using keyframes and transform properties. By applying slight animation delays to each letter, it simulates a wave-like effect that moves fluidly across the text.
Author
HaganCSS Pre-processor
SCSSScroll Down
Western Electric Big Button Phone
This unique text style made the look of numbers on a Western Electric Big Button Phone, using a gradient background with an outline around the text and a transparent fill.
Author
Alex (alexgoff)Created on
May 15, 2019CSS Pre-processor
SCSSJS Pre-processor
YesHover to Play
Underline clip hover animation
Code
DownloadMade With
HTML, CSS
In this style underline is used which covers half of the text but when you hover over the text under will move bottom side of the text with smooth transition effect.
Author
Marwan Zibaoui (RickyMarou)Created on
February 15, 2020Click to Play
Stay Positive
In this heading style, the word 'Yes' is hidden beneath the text using CSS, and it appears with an animation when the heading is clicked. A transition effect is also applied to the background of the text.
Author
Adam Kuhn (cobra_winfrey)Created on
January 31, 2019CSS Pre-processor
SCSSSquiggly Text
This CSS code creates a squiggly text animation using keyframes, applying various filters to simulate a wavy effect. The text is displayed in a large font size on a dark background, with styles for smaller text variations.
Author
Lucas Bebber (lbebber)Created on
March 13, 2015CSS Pre-processor
StylusReload to Play Again
Smooth Typewriter Text Animation
The smooth typewriter text animation simulates the effect of text being typed out, one character at a time, in a fluid motion. This effect is typically achieved using CSS @keyframes along with the width or text-shadow property, creating a seamless and continuous typing effect across the text.
Author
Aakhya SinghSliding Perspective
The sliding perspective effect in CSS creates a 3D-like motion where elements appear to slide in or out with a perspective shift, giving depth to the animation. This is achieved using transform, perspective, and translate properties to create the illusion of elements moving in 3D space.
Author
Adam Dipinto (AdamDipinto)Created on
July 17, 2019Hover to Play
Skew text on hover
The skew text on hover effect in CSS distorts the text by tilting it at an angle when a user hovers over it. This is done using the transform: skew() property, creating a dynamic, interactive visual effect that changes the appearance of the text on hover.
Author
delpher (delpher)Created on
July 17, 2018CSS Pre-processor
SCSSJS Pre-processor
YesSVG Text Underline
Using SVG images as text decorations is a unique concept, so feel free to incorporate this into your project and customize it according to your needs. This effect looks amazing!
Author
Andrew Spencer (iam_aspencer)Created on
March 3, 2019CSS Pre-processor
SCSSRotating text with CSS animations
Code
DownloadMade With
HTML, SCSS
This code creates a rotating text effect, displaying different words like "beautiful," "maintainable," and "perfect" that transition smoothly on the screen from the bottom to slide up . The layout is responsive, with different font sizes for smaller and larger screens, enhancing visual appeal.
Author
Keenan PayneCSS Pre-processor
SCSSRefracted Floating Text Effect
This code creates a refracted floating text effect, displaying an animated heading over a background image that dynamically adjusts its size based on the viewport.
Author
George W. Park (GeorgePark)Created on
September 18, 2018Popout Text with Background Image Shadow
This code creates a popout text effect with a sliding background image, featuring large uppercase text that casts a shadow. The background moves smoothly, enhancing the visual appeal of the text, which is styled using the Montserrat font.
Author
Mark (defaultclass)Created on
October 25, 2018CSS Pre-processor
SCSSHTML Pre-processor
PugReload Page
CSS Text Reveal
Recreating the iconic "READY" screen from the Mega Man games using only CSS, without JavaScript, is possible by utilizing CSS Grid for layout and CSS variables to control timing and animations.
Author
Andrés Sánchez (sedran)Created on
October 25, 20181
2
3
4