CSS Text Animations Free [Updated]

Scrolltrigger text animation

Mouse Scrolltrigger then text down to animation in left.

Preview

Codepen Code

Author: ScrollMoo

Published: February 12, 2025

Made With: HTML, CSS, JS

Animated highlight text reveal

A modern, animated text display that cycles through uplifting words ("awesome", "nice", "sweet", "great") with a clean, minimalist design.

Preview

Codepen Code

Author: Bogdan Sandu

Published: November 2, 2024

Made With: HTML, CSS, JS

Water wave text animation css

A creative text effect using pure CSS.

Preview

Codepen Code

Author: Muhammad Shabbir

Published: October 10, 2024

Made With: HTML, CSS

Git Contributions

This box contains a grid-like display, representing GitHub contributions.

Preview

Codepen Code

Author: Mauro

Published: September 3, 2024

Made With: HTML, CSS, JS

Text vertical animation

CSS animation for vertical text using CSS. Text moves up or down in a smooth, eye-catching animated pattern, giving the page a dynamic and modern effect.

Preview

Codepen Code

Author: jonathan

Published: August 21, 2024

Made With: HTML, CSS

Text Animation (OLD)

Red color text black color effect.

Preview

Codepen Code

Author: mmat

Published: June 26, 2024

Made With: HTML (Pug), CSS (Sass)

Pure Css Infinite Text Scroll Animation

The text is in a sans-serif font and has a gradient effect, transitioning from a lighter gray on the left to a darker gray on the right.

Preview

Codepen Code

Author: Elias Medina

Published: June 25, 2024

Made With: HTML, CSS (SCSS)

Typewriter Animation

This Codepen showcases a typewriter animation using only CSS. The animation simulates the effect of text being written letter by letter, as if written by a typewriter.

Preview

Codepen Code

Author: Elias Medina

Published: June 17, 2024

Made With: HTML, CSS (SCSS)

Txt color anim

Colorful Text Animation with Custom Properties.

Preview

Codepen Code

Author: mmat

Published: May 11, 2024

Made With: HTML (Pug), CSS (Sass)

Bendy text

The text appears to be curved or wrapped around an implied corner, creating a 3D or perspective effect.

Preview

Codepen Code

Author: Amit

Published: April 7, 2024

Made With: HTML (Pug), CSS (SCSS)

Text and Background Animation - CSS Only

Text & background color change, container scale up / down and more.

Preview

Codepen Code

Author: KrissK

Published: October 29, 2023

Made With: HTML, CSS

Scrolling Animation

The image features a purple background, with the phrase "I Love Pineapples" displayed prominently.

Preview

Codepen Code

Author: Diana Moretti

Published: October 13, 2023

Made With: HTML, CSS

Container Text to Letter-text animation in Vanilla JS

Create a container and edit the letters inside with javascript.

Preview

Codepen Code

Author: Daniel Pelz - wwwagency.de

Published: October 9, 2023

Made With: HTML, CSS, JS

Decode text animation (on hover)

Has it been done 100s of times before? Yes. Still, I had fun building my own 'decode text' effect.

Preview

Codepen Code

Author: Tom Miller

Published: July 26, 2023

Made With: HTML, CSS, JS

Falling Text Animation

This is a purely css (vanilla css) text animation. This can be used to make your websites more attractive and give a 3d touch to texts. Hope you enjoy it!

Preview

Codepen Code

Author: Monu

Published: June 25, 2023

Made With: HTML, CSS

Flicker Text Reveal animation

Awesome Text Reveal animation.

Preview

Codepen Code

Author: Smit Prajapati

Published: June 6, 2023

Made With: HTML, CSS (SCSS), JS

Synthetic Text

The features a light gray, gradient background, transitioning from slightly darker at the edges to lighter in the center.

Preview

Codepen Code

Author: Someone

Published: April 11, 2023

Made With: HTML, CSS

JavaScript Text Animation

Only middle text change.

Preview

Codepen Code

Author: Sunil_Salaria

Published: March 21, 2023

Made With: HTML, CSS, JS

Changing Text Animation CSS

Here’s a simple way to create a responsive changing or rotating text animation using HTML and CSS only.

Preview

Codepen Code

Author: Coding Yaar

Published: March 13, 2023

Made With: HTML, CSS

The aurora (only CSS)

The aurora effect made with only the CSS.

Preview

Codepen Code

Author: Ostylowany

Published: March 28, 2023

Made With: HTML, CSS

CSS Text Color Animation

Text multi-color with animation.

Preview

Codepen Code

Author: Toufiq Gilani Rabbu

Published: February 23, 2023

Made With: HTML, CSS

Letter spacing animation

The phrase "HELLO WORLD" is repeated numerous times, arranged in a grid-like pattern with two columns.

Preview

Codepen Code

Author: KitasenjuDesign

Published: February 23, 2023

Made With: HTML, CSS

Text Animation Hacked

Text random to change with animation.

Preview

Codepen Code

Author: Alex Golovanov

Published: February 18, 2023

Made With: HTML, CSS, JS

Text And Wave Animation

Water wave text animation is the first thing in this pen, which is made using css clip-path.

Preview

Codepen Code

Author: Yudiz Solutions Limited

Published: February 14, 2023

Made With: HTML, CSS

Loading Text Animation

When users are going to this site they run a loading splash screen with text split animation.

Preview

Codepen Code

Author: Yudiz Solutions Limited

Published: February 3, 2023

Made With: HTML, CSS (SCSS)

Animated 3d Flipping Loading Text

Animated 3d Flipping Loading Text using HTML CSS.

Preview

Codepen Code

Author: Website Mentor

Published: December 14, 2022

Made With: HTML, CSS

SVG Text Effect with GSAP

Click the button then text animation effect.

Preview

Codepen Code

Author: Dusko Stamenic

Published: July 15, 2022

Made With: HTML, CSS, JS

Let's spread some love

A close-up, abstract background of pink and white, resembling blurred floral petals or soft fabric.

Preview

Codepen Code

Author: Oualid CHAOUATI

Published: April 22, 2022

Made With: HTML, CSS (SCSS), JS

Text color animation

The gradient color text with animation.

Preview

Codepen Code

Author: Swarup Kumar Kuila

Published: October 1, 2021

Made With: HTML, CSS

EAT SLEEP RAVE - 3D ROTATE

The text is presented in a bold, sans-serif font and is divided into three color sections.

Preview

Codepen Code

Author: Emilio

Published: June 28, 2022

Made With: HTML, CSS (SCSS)

Text Animation with Pure CSS

Pure CSS Text Animation.

Preview

Codepen Code

Author: afa

Published: January 5, 2022

Made With: HTML, CSS (SCSS)

Title Page - CSS Only

A black background with two lines of text, each word split across the lines.

Preview

Codepen Code

Author: Event Horizon

Published: November 13, 2021

Made With: HTML, CSS (SCSS)

Change the colors of each word - CSS Animation

How to animate text color with CSS using Keyframe and CSS variables.

Preview

Codepen Code

Author: mtscarvalho

Published: September 21, 2021

Made With: HTML, CSS

Text Shadow

A bold, outlined font with a glowing blue effect, flanked by dashes and small squares.

Preview

Codepen Code

Author: Gabriele

Published: November 2, 2021

Made With: HTML, CSS (SCSS)

3d text

Circular arrangement with rainbow gradient colors against a black background.

Preview

Codepen Code

Author: Kevin

Published: September 17, 2021

Made With: HTML, CSS (SCSS)

Text Animation 2

HTML CSS Loading && LOADING animation.

Preview

Codepen Code

Author: Ziyovuddin

Published: July 31, 2021

Made With: HTML, CSS

Letter animation(hover) - Course Challenge

Letter animation multiple style and colors.

Preview

Codepen Code

Author: Ofek Nakar

Published: July 13, 2021

Made With: HTML, CSS, JS

TGD Waterwave Animation

Pure CSS Water Wave Text Animation Effect using CSS clip-path.

Preview

Codepen Code

Author: Oluwakemi

Published: May 5, 2021

Made With: HTML, CSS

AUYK 5

Black background and white color text.

Preview

Codepen Code

Author: Umar Farooq

Published: February 21, 2021

Made With: HTML, CSS

AUYK 3

The features a vibrant yellow to orange gradient background.

Preview

Codepen Code

Author: Umar Farooq

Published: February 21, 2021

Made With: HTML, CSS (SCSS), JS

Holographic type

A light blue, slightly speckled font against a pale background.

Preview

Codepen Code

Author: Jimmy Chion

Published: September 7, 2021

Made With: HTML, CSS

Text Animation

Initially I wanted to have is result without using multiple divs, using just CSS text-shadow, but couldn’t find a variable font with stroke option.

Preview

Codepen Code

Author: Gayane Gasparyan

Published: August 17, 2021

Made With: HTML, CSS (SCSS)

Flying platform (CSS)

In the center, there are two horizontal, circular platforms or discs, one above the other.

Preview

Codepen Code

Author: Amit Sheen

Published: July 2, 2021

Made With: HTML, CSS (SCSS)

Airport info

This text animation is marquee style.

Preview

Codepen Code

Author: Quinto Jesús

Published: May 26, 2021

Made With: HTML (Pug), CSS (Sass)

Animation in the Dark | Café Text Animation

Background image with text animation.

Preview

Codepen Code

Author: @keyframers

Published: March 30, 2021

Made With: HTML, CSS (SCSS)

3D CSS Letter Transition

Click the icon and zoom letter with transition.

Preview

Codepen Code

Author: Adam Kuhn

Published: September 15, 2020

Made With: HTML, CSS (SCSS)

Neon Tex

This feels like reality.

Preview

Codepen Code

Author: Mohamed

Published: September 4, 2020

Made With: HTML, CSS

CSS Text-Shadow Animation

Multi-color text shadow animation.

Preview

Codepen Code

Author: Faria Begum Riya

Published: August 30, 2020

Made With: HTML, CSS (SCSS)

Bottle of Text

A spinning water bottle made of text and CSS 3D transforms.

Preview

Codepen Code

Author: Jon Kantner

Published: August 3, 2020

Made With: HTML (Pug), CSS (SCSS)

CSS Neon Text Animation

Easy CSS Neon Text animation.

Preview

Codepen Code

Author: Unleashed Design

Published: April 10, 2019

Made With: HTML, CSS (Sass)

Text Animation

This text animation is a gray to multiple.

Preview

Codepen Code

Author: Furkan

Published: May 23, 2020

Made With: HTML, CSS (SCSS)

Easy Animation

The word is constructed using a layered or stacked effect, with each letter comprised of multiple offset copies in different colors.

Preview

Codepen Code

Author: Mark Mead

Published: May 17, 2020

Made With: HTML, CSS (SCSS)

Rainbow spotlight

Using background-clip:text and animating clip-path on pseudo element, the ranibow focus was achieved.

Preview

Codepen Code

Author: Shireen

Published: March 6, 2020

Made With: HTML, CSS

Neon Lights

A pixelated style, reminiscent of an LED display or digital text.

Preview

Codepen Code

Author: Cooper

Published: February 25, 2020

Made With: HTML, CSS (SCSS)

Rainbow and Trail Effect

Rainbow color and dancing effect.

Preview

Codepen Code

Author: Mateus Generoso

Published: February 24, 2020

Made With: HTML, CSS (SCSS)

Line through effect 3D

If the work I've been putting out since early 2012 has helped you in any way or you just like it.

Preview

Codepen Code

Author: Ana Tudor

Published: February 8, 2020

Made With: HTML, CSS (SCSS)

Mix-blend-mode

Text up to animated and two color with text.

Preview

Codepen Code

Author: Cassandra Rossall

Published: Cassandra Rossall

Made With: HTML, CSS

Drop : Gooey Effect

Rain animation effect in "DROP" text.

Preview

Codepen Code

Author: Tushar Choudhari

Published: November 25, 2019

Made With: HTML, CSS (SCSS)

Spooky Typo

Experimenting with a CSS blur filter, text-shadow, and transform skew effects animated.

Preview

Codepen Code

Author: ilithyailithya

Published: October 23, 2019

Made With: HTML, CSS (SCSS)

Cartoon Type

Black background with multiple color text animation.

Preview

Codepen Code

Author: Tim Van Damme

Published: September 28, 2019

Made With: HTML, CSS

Tiger Uppercut

Knockout text with overlapping animated gifs and CSS mix-blend-mode.

Preview

Codepen Code

Author: Ryan Mulligan

Published: November 22, 2018

Made With: HTML, CSS (SCSS)

Shining Text Animation Effects

Shining Text Animation Effects.

Preview

Codepen Code

Author: FrankieDoodie

Published: October 13, 2018

Made With: HTML, CSS

Animated Text Gradient

3 Colors combination square card border animation.

Preview

Codepen Code

Author: chrishodges

Published: June 8, 2018

Made With: HTML, CSS