Member Avatar for ekardh

Hello DW,

I don't like the way the excerpt text in Wordpress just abruptly cuts out at the end and would like to apply a gradual fade-out effect. Like this:
http://i.imgur.com/HtVmRFH.png

Could anyone help me achieve this?

Regards,

  • 3 Contributors
  • 2 Replies
  • 233 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by DJBirdi

Dani AI

Generated

Short summary and recommendation: the smooth fade can be implemented two practical ways — a CSS mask on the excerpt element (preferred: smooth, hardware-accelerated, keeps text selectable) or an overlay gradient (simple fallback, or when mask support is a concern). was right to suggest overlay/PNG as an option; ‘s selection concern is valid and can be avoided with the patterns below.

Mask-based (preferred)

/* mask-based fade (keeps text selectable and crisp) */
.excerpt {
  display: block;                 /* container for the excerpt */
  max-width: 100%;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

Notes: the 70% stop controls where the fade begins; adjust to taste. This fades the rendered text itself and does not insert extra DOM elements. Use this when the excerpt sits over a plain or semi-plain background.

Overlay pseudo-element fallback

/* overlay gradient fallback (match the site's background color) */
.excerpt { position: relative; }
.excerpt:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6em;                      /* width of the fade area */
  pointer-events: none;            /* preserves text selection and clicks */
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}

Notes: match the gradient colors to the site background (invert for dark themes). Setting pointer-events:none makes the pseudo-element transparent to mouse events so text selection and links continue to work — this addresses ‘s concern. If the background is complex (pattern, image), prefer the mask method; for legacy browsers, a small gradient PNG overlaid is a simple fallback.

Accessibility and practical tips: ensure full content is reachable (a visible "Read more" link or server-side excerpt) so screen-reader and search-index behavior is predictable. For precise multi-line truncation consider -webkit-line-clamp for modern browsers, or generate the excerpt on the server when exact text length matters. Test on target browsers and mobile to confirm readability.

Recommended Answers

All 2 Replies

Member Avatar for Member #685911

shouldnt be very difficult. either you do it via CSS and put a layer over your excerpt or you use a transparent .png image with the gradient. i m sure if you google for that that somebody has alrady provided a tutorial for this. try checking netuts or similar.

Member Avatar for DJBirdi

Correct me if I'm wrong but wouldn't overlaying the text with a transparent image make all the text under it un-selectable?

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.