Member Avatar for <M/>

I applied a shadow effect, but there is this 3d effect that shows up on the top of the site:
I applied this css:

    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
  • 1 Contributor
  • 2 Replies
  • 74 Views
  • 16 Minutes Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

This thread shows a very common CSS interaction: a shadow that looks like a stray “3D” band or a floating slice usually comes from how the browser paints stacking contexts, clipping, and antialiasing. @M/ reported the artifact and later noted it was resolved; the symptoms described are often caused by a shadow element sitting in a different stacking context (negative layer, transformed/opacity ancestor, or overflow clipping) or by subtle border-radius/antialiasing seams.

Quick checklist (practical, non-invasive steps):

  • Use the browser devtools to find which ancestor creates a stacking context (look for transforms, opacity < 1, or positioned elements with explicit layer indices). See MDN on stacking contexts and z-index for details: Understanding z-index.
  • Avoid pushing a shadow element behind the page with negative layering. Instead render the shadow inside the same local stacking context (for example, give the container a stacking context and draw the shadow inside it) so painting order is predictable.
  • If a thin seam remains at the rounded edge, try moving the shadow slightly away from the border or adjust blur/spread so antialiasing blends cleanly. Also confirm overflow is not clipping the shadow.
  • Prefer placing the shadow on the container (or via an inner pseudo-element) rather than as a separately positioned element behind everything; it reduces cross-browser artifacts. See MDN on box shadows: box-shadow.

Note: negative stacking and transformed ancestors are frequent culprits in older WebKit/Chrome builds; creating a local stacking context for the container is usually the safest long-term fix.

Member Avatar for <M/>

ok, so i fixed the 3d effect, but now i get this extra piece just "hanging out" on top...

here it is as of so far:

 position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
Member Avatar for <M/>

fixed it...!

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.