Collection of free CSS text-stroke code examples from Codepen and other resources.

Related Articles

  1. CSS Text Effects
  2. CSS Font Variable Effects
Demo image: Gradient Stroke

Author

  • Marco Biedermann

Links

Made with

  • HTML / CSS (PostCSS)

About a code

Gradient Stroke

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

Responsive: no

Dependencies: -

Demo image: Text Stroke

Author

  • Patrick Freedom Mayer

Links

Made with

  • HTML / CSS (SCSS)

About a code

Text Stroke

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

Responsive: no

Dependencies: -

Demo image: Retro Text Effect (Pure CSS)

Author

  • Yoav Kadosh

Links

Made with

  • HTML / CSS (SCSS)

About a code

Retro Text Effect (Pure CSS)

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

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

Responsive: yes

Dependencies: -

Demo image: Typo Triple

Author

  • creatz

Links

Made with

  • HTML / CSS

About a code

Typo Triple

Text stroke text effect.

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

Responsive: no

Dependencies: -

Demo image: Western Electric Big Button Phone

Author

  • Alex

Links

Made with

  • HTML / CSS (SCSS)

About a code

Western Electric Big Button Phone

A recreation of the Western Electric Big Button phone produced in the 1970's. Recreated using flexbox, grid, text-shadows, and text-strokes.

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

Responsive: no

Dependencies: -

Demo image: Strokes, Shadows + Halftone Effects

Author

  • Mark Mead

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Strokes, Shadows + Halftone Effects

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Demo image: text-stroke: 4 Ways

Author

  • Kseso

Links

Made with

  • HTML / CSS

About a code

text-stroke: 4 Ways

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

Responsive: yes

Dependencies: -

Demo image: Start Spreading The News — New York Poster

Author

  • Melissa Em

Links

Made with

  • HTML / CSS (SCSS)

About a code

Start Spreading The News — New York Poster

New York Poster with text-stroke, filters, and mix-blend-mode.

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

Responsive: yes

Dependencies: -

Demo image: CSS Outline Text Stroke

Author

  • Viljami Salminen

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Outline Text Stroke

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

Responsive: yes

Dependencies: -

Demo image: CSS3 Stroke and Gradient Text

Author

  • James Nowland

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS3 Stroke and Gradient Text

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

Responsive: yes

Dependencies: -

Demo image: Gradient Text Stroke CSS

Author

  • Seth Jenks

Links

Made with

  • HTML / CSS

About a code

Gradient Text Stroke CSS

CSS and SVG text strokes with gradient.

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

Responsive: yes

Dependencies: -

Demo image: Pure CSS Animation on Single Letter, Slide & Bounce

Author

  • Robert Borghesi

Links

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Animation on Single Letter, Slide & Bounce

Pure CSS animation, using @keyframes and SCSS cycles (@for). Black & white using text-shadow and using text-stroke. No JS.

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

Responsive: no

Dependencies: -

Demo image: CSS Text Stroke and CSS Text Border

Author

  • Ignacio Correia

Links

Made with

  • HTML (Pug) / CSS (Less) / JS

About a code

CSS Text Stroke and CSS Text Border

Infinite effect only with CSS and HTML5.

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

Responsive: no

Dependencies: jquery.js, tweenmax.js

Demo image: 3D CSS Typography

Author

  • Noah Blon

Links

Made with

  • HTML / CSS

About a code

3D CSS Typography

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

Responsive: no

Dependencies: -