Member Avatar for moorcroft

Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.

shade.PNG 7.87 KB
Edited by moorcroft because: n/a
  • 2 Contributors
  • 2 Replies
  • 75 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by moorcroft

Dani AI

Generated

As clarified, the thin vertical mark is a shadow/overlay sitting between the blue gradient sidebar and the main content. Two reliable CSS approaches: (1) add a soft box-shadow on the content edge, or (2) create a small absolute-positioned pseudo-element on the content that overlaps the sidebar for precise control (recommended for a thin, controlled fade).

Example using a pseudo-element (content overlays the sidebar so the shadow sits on top):

.sidebar {
  width: 220px;
  float: left;
  background: linear-gradient(to bottom, #2f8bd6 0%, #1f5f9a 100%);
}

.content {
  margin-left: 220px;
  position: relative;
  z-index: 2;
  background: #fff;
}

.content::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;        /* overlap into the sidebar */
  width: 12px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,0.25), rgba(0,0,0,0));
}

A simpler alternative is box-shadow: -8px 0 12px -6px rgba(0,0,0,0.35); on .content, but the pseudo-element gives exact width and a crisper edge (use border-left: 1px solid rgba(0,0,0,0.12) if a hairline is desired). Common issues: the pseudo-element must not be clipped (watch overflow on parents) and stacking order matters (position + z-index). For reference on gradients, pseudo-elements and shadows, see MDN: linear-gradient, ::before, and box-shadow. This keeps the sidebar gradient independent while the thin vertical fade produces the shaded seam mentioned.

Recommended Answers

All 2 Replies

Member Avatar for macneato

umh.... I'm not sure what you trying to do, you talking about the gradient?

Member Avatar for moorcroft

The thin verticle line between the blue gradient and the content which gives it a shade effect.

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.