Fabrizio Van Marciano

available for hire

Transparent Headings With Border Outline CSS Tutorial (Video)


In this video post, you’ll learn how to use CSS to add transparent headings with a colored outline for your website.

Welcome back to the screencast peeps, let’s get started.

One of my favorite elements to style on a webpage are headings. With a little creativity, you can make your website headings pop out using some simple CSS.

Not only do creative headings look great but they can be really useful for boosting conversions.

First of all, I’m doing this all inside of Oxygen Builder since this is one of the plugins that I use for building WordPress websites. However, you do not need to own Oxygen to make this work on your website.

Whichever theme you’re using, you can simply add your own CSS by finding the dedicated CSS sandbox (if your theme comes with one). Or you can go to Appearance > Customize > Additional CSS.

Just remember to save any changes, and clear the cache if you’re using a WordPress caching plugin like Super Cache.

WPCodeBox Plugin

If you enjoy adding a lot of CSS customizations to your WordPress website, I recommend checking out WPCodeBox. This is the plugin that I use for all of my website projects, and it’s a great way to store and use custom code on your website. Click here to learn more.

Right then, let’s get started.

Below you’ll find the short video tutorial for this little hack. In addition, I’ve included the CSS snippet that you can copy and paste into your website. Feel free to tweak the code any way you wish.

CSS Code Snippet

Below is the CSS you need to make this work. Don’t forget to give your heading element a custom class name. I’ve simply used the class .heading-outline in the tutorial.

.outline-heading {
	font-weight: 900;
	line-height: 1em;
	color: transparent;
	-webkit-text-stroke: 1px #ffffff;
}

That’s it. Nice and short and I hope you enjoyed this tutorial. Don’t forget to check out more of my WordPress and CSS hacks here.

Web Design Video Course

If you’re interested in learning how to design a beautiful WordPress website like mine, check out my WordPress + Oxygen Builder, and Bricks Builder Web Design Video Courses. You can signup here.

Recommended Tutorials

  1. Fancy Hyperlinks Hover Effects With CSS
  2. Syntax Highlight Code Block CSS Tutorial
  3. CTA Button Styles With Hover Effects

Get access to my courses and expert tutorials!

Everything you need to design your website with WordPress, Oxygen, Bricks Builder, Bricks Builder, plus over 100 video tutorials, code snippets, templates, Discord Community, and more.

Join Van Marciano Pro

FREE WEB DESIGN LESSON

SIGNUP FOR MY FREE 40-MINUTE OXYGEN BUILDER COURSE TASTER