Member Avatar for Joshua Kidd

How can I get an hr to fade off into the page color on both ends?

Not an effect. Just the look of the <hr>

Thanks if someone can help :)

Edited by Joshua Kidd because: n/a
  • 3 Contributors
  • 7 Replies
  • 216 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Joshua Kidd

Dani AI

Generated

A few practical ways to get an <hr> to "fade" into the page color at both ends — building on and 's ideas and 's table workaround, but using modern CSS that avoids extra markup.

A simple, robust single-element pattern (works in modern browsers):

hr.fade {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, transparent 0%, #bbb 15%, #bbb 85%, transparent 100%);
  width: 70%;
  margin: 1em auto;
}
  • The visible center is the solid color (#bbb here); the transparent stops create the soft fade. Tweak the color and the 15%/85% stops to make the fade tighter or wider.

When the page background is not a single flat color (or when the line must span the full container while only the ends fade), use pseudo-elements so the middle remains crisp while the ends blend:

hr.edge-fade {
  position: relative;
  height: 0;
  border: none;
  margin: 1em 0;
}
hr.edge-fade::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: #bbb;
  transform: translateY(-50%);
}
hr.edge-fade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(187,187,187,0.95) 10%, rgba(187,187,187,0.95) 90%, transparent 100%);
  transform: translateY(-50%);
  pointer-events: none;
}

Notes and troubleshooting

  • For IE8-era browsers: CSS gradients and some pseudo-element behavior are limited; use a small alpha-PNG or an SVG as a graceful fallback.
  • If the page uses a background image/pattern, consider an SVG mask or match the background in the pseudo-element so the fade appears seamless.
  • Adjust the color stops, opacity, and the middle segment width until the fade looks natural against the page color.

These patterns keep the markup semantic (an <hr>), are easy to tune visually, and avoid the brittle table/image hacks unless old-browser support forces that route.

Recommended Answers

All 7 Replies

Member Avatar for lps

By controlling its width?

Member Avatar for Dandello

By replacing it with an image?

Member Avatar for lps

no, you can either use it in html code such as

<hr style="width:500px;"/>

or you can add class to the line and use CSS to control it.
Before I forget, you can center it by adding margin:auto

Edited by lps because: n/a
Member Avatar for Dandello

Since the request was for a fade - that would imply a gradient from the color of the hr element to the background color, which is why I suggested an image. Maybe a gradient would work. But I doubt it will work in MSIE.

Member Avatar for lps

Oh, maybe I misunderstand you meaning. How about if adding shadow to both side of the hr? It work for me, but the problem still in IE7/8 where I use filter to generate the shadow.

Member Avatar for Dandello

Nothing fancy or cool works properly in IE7/8. But apparently it does support gradients in CSS. Look for "CSS gradient background".
Let us know if it works.

Member Avatar for Joshua Kidd

WORKED!! Had to make a table with only certain sides gradient because I needed a horizontal hr as well but could not find one.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.