Copy-and-paste CSS heading designs

A plain heading is just bold text. A single touch here makes the whole page look tighter. This article collects 10 classic heading designs, each with a live demo. Just copy and paste, then change the color to your own theme color.

Tighten it up with a line

A simple underline

Start here. Drawing a single theme-colored line underneath is enough to give it a “heading” feel.

.heading {
  border-bottom: 3px solid #ff8a3d;
  padding-bottom: 8px;
}

The trick is to use padding-bottom to leave a little gap between the text and the line.

A vertical line on the left

Standing a line on the left gives a crisp impression. It’s a staple of business and news-style sites.

.heading {
  border-left: 6px solid #ff8a3d;
  padding-left: 14px;
}

Adjust the thickness of border-left and padding-left as a set. When you make the line thicker, widen the spacing too so the text doesn’t stick to the line. If you make the line a gray like #ddd and give only the text your theme color, you get a much calmer look.

A two-color underline

Draw a light line across the whole width, and lay your theme color over just the left edge—it looks a little advanced, but it’s really just a few lines.

.heading {
  position: relative;
  border-bottom: 3px solid #eee;
  padding-bottom: 8px;
}
.heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 60px;
  height: 3px;
  background: #ff8a3d;
}

::after is a tool that “adds one decoration behind an element using CSS alone.” Changing width adjusts the length of the colored part.

A short accent line in the center

For a center-aligned heading, place a short line neatly below it. It suits sites with a soft mood.

.heading {
  text-align: center;
}
.heading::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: #ff8a3d;
}

Make it stand out with fill

A highlighter marker

Color only the bottom half of the text, highlighter-pen style. The trick is to make the gradient “transparent on the top half.”

.heading {
  display: inline;
  background: linear-gradient(transparent 60%, #ffe066 60%);
}

Making the 60% number smaller makes the marker thicker, larger makes it thinner. display: inline is the key—with it, the marker continues onto the wrapped second line (with block, the whole box gets painted instead of the text).

A background band

Fill the whole heading with color and round the corners. Section breaks become clear.

.heading {
  color: #fff;
  background: #ff8a3d;
  padding: 10px 18px;
  border-radius: 8px;
}

This band spreads across the full width. It works as-is for section breaks, but when you want it to stop at the length of the text, add display: inline-block.

A speech bubble

Add a downward triangle and it becomes a speech bubble, as if it’s talking. It shines on kid-friendly, casual pages.

.heading {
  display: inline-block;
  position: relative;
  color: #fff;
  background: #ff8a3d;
  padding: 10px 22px;
  border-radius: 999px;
}
.heading::after {
  content: "";
  position: absolute;
  left: 32px;
  bottom: -8px;
  border: 8px solid transparent;
  border-top-color: #ff8a3d;
  border-bottom: none;
}

The triangle is really “a square with color on just one side of its border.” left moves the position of the tail.

display: inline-block is needed because a plain <h2> spreads across the full width. Adding this shrinks it exactly to the length of the text, and only then does it finally take on the “speech bubble” shape.

A step up in flair

Lines on both sides

Lines extend left and right from centered text—an anniversary or feature-page look. It lines up “line, text, line” with flex.

.heading {
  display: flex;
  align-items: center;
  gap: 16px;
}
.heading::before,
.heading::after {
  content: "";
  flex: 1;
  height: 2px;
  background: #ff8a3d;
}

The mechanism is that the ::before and ::after lines stretch to fill the remaining width on each side with flex: 1.

Gradient text

Paint the text itself with a gradient—a starring-role flourish. It’s effective used on just one big heading on the top page.

.heading {
  background: linear-gradient(135deg, #ff8a3d, #ff5e78);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

The mechanism is “cut out the background gradient in the shape of the text.” Don’t forget color: transparent to erase the original text color.

Add a small English label

A small English label under a heading. It’s a staple of stylish café and portfolio sites.

.heading span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 3px;
  color: #ff8a3d;
}

In the HTML, just wrap the label in a <span> like <h2>About Me<span>PROFILE</span></h2>. Widening letter-spacing makes it look much more the part.

Swap all the colors at once

The samples in this article are all orange (#ff8a3d), but in practice you change it to your own theme color. Once you use it in more places, giving the color a “nickname” lets one change take effect across every heading on the page.

:root {
  --main-color: #ff8a3d;   /* change just this to change everything */
}
.heading {
  border-bottom: 3px solid var(--main-color);
}
.heading::after {
  background: var(--main-color);
}

--main-color is the color’s nickname (a CSS variable), and var(--main-color) is how you call it by nickname. Reuse the same variable for headings, buttons, and links, and the whole site’s color changes in a single line.

A checklist for when headings go wrong

When you paste something and it looks off, it’s usually one of these.

• The ::after decoration doesn’t appear → Did you forget to write content: ""? Even empty, it’s required.
• The decoration is misplaced or flies off somewhere → The type that uses position: absolute needs position: relative on the heading side.
• The marker paints the whole heading instead of the text → Is it display: inline? With block, the whole box gets painted.
• The top and bottom spacing is uneven → h2 has the browser’s default margin. Set your own with something like margin: 40px 0 16px to tidy it up.

Summary

1. When in doubt, use an underline or a left vertical line—two foolproof looks that give a “heading” feel in a few lines.
2. Learn ::before / ::after and you can add decorations (lines, triangles, accents) without changing the HTML.
3. Keep flashy flourishes (gradient text, speech bubbles) to one or two spots per page to keep it tasteful.

Even with the same text, a single change of heading style makes it look like a “carefully built page.” Try just one, with your theme color.