10+ CSS text effects (latest collection)

Latest & unique collection of hand-picked free HTML and CSS text effects examples with codes. Updated on April 2022
hover to play
Author Tobias
Tech used HTML / CSS / JS
What is this?

Terminal Text Effect

css text animation effects codepen, css text transition effects examples, css text effects css tricks

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Html5andblog
Tech used HTML / CSS / JS
What is this?

Bubbling Text Effect

css text animation effects codepen, css3 text animation effects example codepen, css text effects css tricks

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Lucas Bebber
Tech used HTML / CSS (Stylus)
What is this?

Wave text effect (with SVG/blend mode)

css3 text animation effects example codepen, css text transition effects examples, pure css text effect

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Jonny Scholes
Tech used HTML / CSS (SCSS)
What is this?

In/out of focus text effect

css text glow effect animation, css highlight text effect codepen, text transition effects css codepen

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Giana
Tech used HTML / CSS (SCSS) / JS
What is this?

CSS-only shimmering neon text

css3 text animation effects example codepen, css highlight text effect codepen

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Robert Borghesi
Tech used HTML / CSS (SCSS) / JS
What is this?

Text-mask background moving on MouseMove – v2

css text hover animation effects, css text hover transition effects codepen, html css text hover effects

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Rachel Smith
Tech used HTML / CSS / JS
What is this?

Rotating text

css highlight text effect codepen, text transition effects css codepen, html css text effect

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Dimitra Vasilopoulou
Tech used HTML / CSS
What is this?

Silent Movie Text Effect

css text effects css tricks codepen, css3 text animation effects example codepen

  • Browser Compalibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Mandy Michael
Tech used HTML / CSS (SCSS) / JS
What is this?

CSS only Frozen text

css text transition effects examples, css text effects css tricks, cool css text effect

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Claire Larsen
Tech used HTML / CSS
What is this?

Text Animation: Montserrat

css text animation effects codepen, cool css text effect, css3 text animation effects example codepen

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No

Subscribe to our Youtube channel for regular tutorial videos on WordPress, Elementor, Web Design & Development, Website & Social Media strategies, etc. We also recommend you to check this “Essential Website Features” article to create a better website.

Hooray! 🎉 Our Ultimate Figma Mega Course is live for you!

X
Cookie settings

Cookies allow us to better serve you. We collect information about the use of our website. You can manage your cookie settings below.

Essential cookies

Essential cookies are necessary for the functioning and development of our website. They do not store information that could immediately identify you.

Visitor measurement and analytics

We use the Google Analytics cookies to track visitor behavior and measure our website performance.