82 CSS Text Effects

About a code

Retro Text Effect

Pure CSS retro text effect with mask-image, text-stroke, and background-clip properties.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Mapping Mouse Position in CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS text-emphasis

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS+SVG Motion Blur Text Effect

A demo of using SVG filters in CSS to create some stunning text effects.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

About a code

Multilayer Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Sticker

A reusable .sticker with CSS variables to adjust the gradient colors and the shine angle.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Fixed Conic Fill

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Gradient Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Drop Capital - ::first-letter

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Split Text with clip-path

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

3D Letters Sugar Sweet

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS in CSS with a lot of C and S

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

writing-mode

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Underline Clip Hover Animation

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 the text since the text color is already the background!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Arcade Typography: Snow Bros. (1990)

Pixelated typeface from the arcade game Snow Bros. Drawn in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Twenty Twenty & Multi-Color Gradients

Multi-colour gradients clipped with CSS, blended with SVG's feGaussianBlur.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Layered text-shadow Effect CSS

text-shadow is a fun little CSS style that can spark up any simple text into a beautiful work of art.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Typo Triple

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Multi Line Text Fat Underline Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

SAVE

Quirky CSS banner using box-shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Multi-line-truncation in Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Sliding Perspective

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

80s Fonts Text Effect 4: Cyberspace Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Multi-line Animated Underline Text Effects

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Custom Multiline Text Underline with Rounded Caps

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Western Electric Big Button Phone

A recreation of the Western Electric Big Button phone produced in the 1970s. 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, leaving a jagged appearance. This was worked around a bit by adding a very soft light box-shadow on the side that has the border-radius. This alleviates the problem somewhat. Second, text-stroke is still crudely implemented in browsers. All text strokes are drawn on the outside of the glyph which changes the shape of the glyph. Additionally, text shadows are sized using the inside of the glyph and end up smaller. To work around this, I oversized the text-stroke and then tried to position each glyph so that the stroke slightly overflowed the container and was cut off. This gives a smoother appearance, but is imprecise and cuts a few of the characters off.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Multiline Text Strikthrough

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Outline Text Effect

Simple text outline effect using on basic CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Back in Black

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Neon Light Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Text In A Circle

Text in a circle with CSS variables.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

SVG Text Underline

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Animated Blobs Text

Animated Blobs Text by using only CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Stay Positive: Text Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Multiline Background Gradient

Multiline background gradient with mix-blend-mode.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Background Clip CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

DECONSTRUCTED

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Popout Text With Background Image Shadow

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!

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

CSS Text Reveal

Simple text reveal with css using pseudo elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Only CSS: Text Slicer Gradient

Please typing your favorite word and change your favorite font-size!

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Cool 3D Text

Cool 3D text with hover state in just CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Refracted Floating Text Effect

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Animated Text-Shadow

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

SVG/Stroke Animation

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Underline Effect

Pure CSS animated underline effect on several lines.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

CSS Gooey Text Transition

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Shimmering Neon Text

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Text Stroke + Offset Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Skew Text On Hover

Skew text on hover in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Megaman READY!

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Animating Striped Text

Animating striped text with background clip and gradients.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Letters Effect

Letters effect on scroll.

About the code

Fun Text

Click to re-draw! Mapping sprites to text is always fun.

About the code

Text Line Animation

Nice text line animation with TweenMax.js.

About the code

Pop Out Text

Pure CSS pop out text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Silent Movie Text Effect

Movie text effect with canvas.

About the code

SVG Text Animation

Nice SVG text animation.

About the code

Text Reveal Animation

GSAP text reveal animation.

About the code

Blazing Fire

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Spring Text Hover Effect

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

About the code

Simple CSS Hover Effect Using Sass Loops

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

About the code

Animated Underlines

Demo of an animated underline effect. Pure CSS animation.

About the code

CSS Attempts at Text with Inline Skewed Background

Using skew is only rendered if the item is display: block or inline-block. Some of these look the same on a wide viewport but fail differently as the viewport width is decreased.

About the code

Moving Cloud Text

Moving cloud text with HTML and CSS.

About the code

Gooey Text Background With SVG Filters

Example of using a gooey SVG filter to create smooth edges around inline text with a background.

About the code

Text With Video Background

This demo explores creating knockout text/paths in SVG and looping a YouTube video as the fill.

About the code

Text Background

Text background clipping.

About a code

Pinchy Type with CSS text-shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

background-clip:text CSS effect

Use background-clip: text and fill-text-color: transparent to apply a background to a text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -