15 Text Outline CSS Examples and Code

15 Text Outline CSS Examples and Code

Adding text outline with CSS is a fundamental way to add style to your text. Text outline can be created with CSS text stroke or CSS text shadow properties. You can also create CSS stroke effects by creating multiple layers of text and adding style to the layer behind the primary text. Here are examples of stroke text from codepen.io and around the web. You may use these examples within your web app or site.

3D CSS Typography

3D CSS Typography
3D CSS Typography

About Project

3D CSS Typography

3D CSS Typography is a project from codepen.io which uses multiple layers to create a pure CSS stroke effect. This example uses a CSS keyframe at-rule to create an animation in which the text is rotating or rocking back and forth. The author uses an ease-in-out transition effect to achieve the slowing down effect before the animation starts moving in the opposite direction.

Author

  • Noah Blon
  • codepen.io

Strokes Shadows Halftone Effects

Strokes Shadows Halftone Effects
Strokes Shadows Halftone Effects

About Project

Strokes Shadows Halftone Effects

Strokes Shadows Halftone Effects is a project on codepen.io that uses CSS properties to give the word Hello several different types of background strokes and shadows. The first two Hellos use CSS text shadow property to give the text a pink-colored shadow. The second set of Hellos use a base64 image and a CSS after selector to give the CSS after pseudo-element a dotted background.

Author

  • Mark Mead
  • codepen.io

Gradient Stroke Text Outline CSS

Gradient Stroke Text Outline CSS
Gradient Stroke Text Outline CSS

About Project

Gradient Stroke Text Outline CSS

Gradient Stroke Text Outline CSS is a project on codepen.io which uses CSS background linear gradients to give the text a gradient background. A WebKit background clip and WebKit background text fill color are used to stripe the text of color by using a transparent background. As the result, you have text with a gradient border and a transparent background. So cool!

Author

  • Seth Jenks
  • codepen.io

CSS Text Stroke With Animation

CSS Text Stroke With Animation
CSS Text Stroke With Animation

About Project

CSS Text Stroke With Animation

CSS Text Stroke With Animation is a project on codepen.io which only uses CSS and HTML to create a text outline with hover animation. The project sets a background to each word with CSS background position offset. When a user hovers over the words the CSS hover selector is activated and the background position offset changes giving the appearance of a background sliding in.

Author

  • Fabio Ottaviani
  • codepen.io

Flashing Text With Outline CSS

Flashing Text With Outline CSS
Flashing Text With Outline CSS

About Project

Flashing Text With Outline CSS

Flashing Text With Outline CSS is a project on codepen.io which uses only HTML and CSS to create flashing text with an outline. The outline is achieved by using the CSS text stroke property. This property places a line around the text equal to the width provided. The author then uses a CSS animation called “fill”, which changes the color of the CSS text fill property from steel blue to slate gray every half second.

Author

  • Zachary Kain
  • codepen.io

Typo Triple CSS Stroke Text

Typo Triple CSS Stroke Text
Typo Triple CSS Stroke Text

About Project

Typo Triple CSS Stroke Text

Typo Triple CSS Stroke Text is a project on codepen.io which uses a combination of three CSS properties to create a triple word CSS stroke. The project uses the CSS text stroke width and color to create the white outline. The text is then given a transparent background with the CSS text fill property. Last, the author uses a CSS text shadow property to create a pink and black text shadow in which the black shadow is spaced farther than the pink. This creates a shadow of a shadow effect.

Author

  • creatz
  • codepen.io

Animated CSS Text Outline

Animated CSS Text Outline
Animated CSS Text Outline

About Project

Animated CSS Text Outline

Animated CSS Text Outline is a project on codepen.io which uses JavaScript, CSS, and HTML to create an animation where the text “in too deep” fades in as neon text. The project creates this effect by using seven layers of the same text with different opacities. It also set the different layers as absolute and gives each layer a specific CSS top to create the layered effect. JavaScript is then used to fade in each layer and word slowly over time.

Author

  • Alex Trost
  • codepen.io

Cursive Font CSS Stroke

Cursive Font CSS Stroke
Cursive Font CSS Stroke

About Project

Cursive Font CSS Stroke

Cursive Font CSS Stroke is a project on codepen.io that creates the text bubblegum using cursive and a CSS stroke text. The project creates the cursive text by loading in the Sacramento font family using the CSS import at-rule. The author then applies a CSS before selector to the bubblegum text. The before selector contains a CSS text stroke property which creates the dark pink outline.

Author

  • Noah Blon
  • codepen.io

Menu Hover Text Stroke Fill

Menu Hover Text Stroke Fill
Menu Hover Text Stroke Fill

About Project

Menu Hover Text Stroke Fill

Menu Hover Text Stroke Fill is a project on codepen.io where a meu was created using stroke text. The project uses a flex container to create the column of menu text buttons. The author uses the CSS WebKit text stroke property to create blue outlines on the text. Additionally, the color of the text is set as transparent. When a user hovers over the text, a CSS hover selector is activated and moves a hidden background into place. This animation uses a CSS transition and a CSS background size to achieve this effect. The background size changes the location of the hidden background, while the transition forces the background to slowly move into place.

Author

  • alphardex
  • codepen.io

Stranger Things CSS Text Stroke

Stranger Things CSS Text Stroke
Stranger Things CSS Text Stroke

About Project

Stranger Things CSS Text Stroke

Stranger Things CSS Text Stroke is a project on codepen.io that creates the Stranger Things logo by using a CSS stroke. The project creates the text effect by using the CSS text stroke property. To create a transparent effect within the text. The author set the font color as transparent.

Author

  • Daniel Eden
  • codepen.io

Retro 80’s Text Stroke

Retro 80's Text Stroke
Retro 80’s Text Stroke

About Project

Retro 80’s Text Stroke

Retro 80’s Text Stroke is a project on codepen.io that creates retro 80’s art with CSS and HTML. The project uses a text stroke on the Tri text. This is achieved by using a CSS text stroke width and a CSS text stroke color property. The text stroke color is set to white and width to 2px to create the white border.

Author

  • Hugo Darby-Brown
  • codepen.io

CSS Loading Stroke Animation

CSS Loading Stroke Animation
CSS Loading Stroke Animation

About Project

CSS Loading Stroke Animation

CSS Loading Stroke Animation is a project on codepen.io that creates a loading animation with text stroke. The animation is created entirely of CSS and HTML. The project places each letter into an element and aligns the elements using a flexbox. The animation is created by setting an incrementing delay on each letter. As the animation runs, the CSS transitions the text stroke to another text stroke while at the same time scaling the letter. This creates an effect of a horizontal wave as the animation runs.

Author

  • CurleyWebDev
  • codepen.io

Directional Aware CSS Stroke

Directional Aware CSS Stroke
Directional Aware CSS Stroke

About Project

Directional Aware CSS Stroke

Directional Aware CSS Stroke is a project on codepen.io which is written in only CSS and HTML. The project uses elements with CSS clip path to create four regions around the text. When a user hovers over the text from any direction the text is filled from the direction with a white background. This effect is achieved because when a clip element is hovered over. The first CSS hover selector is activated. The other hover selectors are ignored.

Author

  • Vangel Tzo
  • codepen.io

Selection Stroke Effect

Selection Stroke Effect
Selection Stroke Effect

About Project

Selection Stroke Effect

Selection Stroke Effect is a project on codepen.io in which there is a selection stroke effect whenever the text is selected. This project also contains color changing background created using CSS keyframe at rules. Whenever a user selects the text with a cursor, the ::selection CSS pseudo element applies a CSS text stroke and a CSS text fill color to the selected text. This results in a transparent, black, outlined text.

Author

  • Ahmad Anas
  • codepen.io

CSS Neon Text Stroke

CSS Neon Text Stroke
CSS Neon Text Stroke

About Project

CSS Neon Text Stroke

CSS Neon Text Stroke is a project on codepen.io that creates a neon sign using text stroke CSS. This effect is created by applying a CSS text stroke width and CSS text stroke color to the local text. A CSS text shadow is then applied to create a glowing effect. The outer blue text and the green neon box outline use CSS text shadow as the glowing effect.

Author

  • Shaun Baer
  • codepen.io
Recommended Articles

Comments

Tip: Thoughtful and well written comments are voted up more often.
0 Comments

No Comments.