90+ CSS Text Effects (Free Code + Examples)

Reproducing the famous "READY" from the Megaman games without using JavaScript. This uses CSS Grid extensively and css variables for timing.

Please typing your favorite word :)

I'm trying to experiment with the clip-path-property and figured I could celebrate reaching 300 followers here on CodePen at the same time. Thank you!

A fancy animated underline using text clipping. The text uses background-clip: text and a linear-gradient background to be bi-color. We get around animating the gradient by animating the background-position instead. We have to use a wrapper element for having the underline highlight under...

Read More

Multi-colour gradients clipped with CSS, blended with SVG's feGaussianBlur. Font: Modak by Ek Type (https://fonts.google.com/specimen/Modak)

Pixelated typeface from the arcade game Snow Bros. drawn in CSS. As seen here: https://readonlymemory.vg/shop/book/arcade-game-typography/

text-shadow is a fun little CSS style that can spark up any simple text into a beautiful work of art. yeah! I am exaggerating but text-shadow is really cool.

Quirky CSS banner using box shadows

Multi-line animated underline text effects with simple customization. Animation's settings are implemented with CSS Custom Properties so you can change values directly in the browser.

Inspired by PSDDude's 80s font collection this text effect is part of the SVG filters 80s font text effects list on

A recreation of the Western Electric Big Button phone produced in the 1970's. Recreated using flexbox, grid, text shadows, and text strokes. This pen encountered several CSS quirks. First, is that setting a border radius and overflow:hidden breaks anti-aliasing on the border radius, leav...

Read More

Simple text outline effect using on basic CSS

Use an SVG to highlight a single word within a block of text. The size of the SVG will flex to fit the word and a tag is used to handle semantics.

Animated quote of the day :) " do something creative everyday" with stroke animations.

Animated Blobs Text by using only CSS.

I watched some 'Deconstructed' videos from Genius, where producers explain how they made the tracks for rappers/singers. I figured why not recreate the DECONSTRUCTED intro.

Cutting out text from a background and then having it "popout" similar to how text shadow can be used. In fact, this does make use of text shadow!

This pen shows how pure CSS can be used to create an animated refracted floating text effect.

A fun, CSS animation that creates a bounce while mimicking an RGB separation during the process.

A very simple and versatile text morphing effect with a couple editable parameters.

Click to re-draw! Mapping sprites to text is always fun! Add in some TweenJS and see what happens :D

Animated text effects using CSS3 text-shadow to give text headers a blazing flame

Simple little hover animation. Sass loops make staggering animation delays really easy to do...you can get a lot of mileage out of them ;D

Just playing around with effects for buttons and thought this was pretty cool.

Demo of an animated underline effect that I showcased at the first CodePen meetup in Iceland. Pure CSS animation.

Tested on Chrome and Firefox

This demo explores creating knockout text/paths in SVG and looping a YouTube video as the fill. My personal 31 Nights of Horror series continues this year and this was built as the teaser landing page. Follow the calendar here: https://yuschick.github.io/31-Nights-of-Horror-2017

Shaded Text, a SVG+CSS3 experiment about animated shadows. It isn't optimized for mobile devices... yet.

Squiggly text experiment with SVG Filters

An experiment using webfonts in combination with CSS 3D transform tools.

This pen was inspired by webdesignerdepot's new design, the title on each article will be highlighted when user hovered it. The idea is simple, it make used of linear gradient and transition. We set the title to be inline element (This will break every background when the title breaked ...

Read More

This pen shows text that looks like it is peeled of the page. It has a smooth animation when hovered. For accessibility reasons, I've added an aria-label to the paragraph. Tests Primarily tested in Safari 8 with VoiceOver on OS X 10.10 Yosemite. Not tested on mobile devices. Also tested...

Read More

make text design (typography) with neon effect

This is a fork of Miloš Rujević's wonderful codebit. I've changed the font to Montserrat and added CSS3 browser prefixes so the animation works right out of the box across browsers. Should work with Firefox, Chrome, Safari, Opera

Getting Friendly with SVG Text # 2: animate && textPath

Created this text animation for a personal new years project. (Also worth a check! (: Canvas (particles) animations) Uses svg clipPath in combination with a stroke & stroke-dashoffset.

Scrambled text effect inspired by the award winning Science Fiction film LOVE http://uk.imdb.com/title/tt1541874/. Ported from a JavaScript jQuery plugin that @soulwire created on jsdo.it at the end of last year after we had just watched the film http://jsdo.it/soulwire/love-text-fx

Tracking in and out text effect (CSS only)

Totally glitchin text effect. Created by animating ::before and ::after pseudo-elements.

I liked the text effect on the Amazing Interiors title cards and wanted to see if I could recreate it in HTML & CSS Resources - https://www.netflix.com/title/80184067 - https://css-tricks.com/adding-stroke-to-web-text/ - https://leaverou.github.io/css3patterns/#polka-dot - https://fonts.g...

Read More

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

Text typer effect, with build and erase. Creates BlipText prototype objects from markup elements with appropriate class / data-attributes.

I used background-clip: text to clip the image to text ( the one on the right) and used a polygon clip-path on the pseudo element to color it white.

one by one letter showing

I will make Neon Glow Text Effect with only one tag and CSS3

HTML text with an image as a fill effect.