Member Avatar for ryy705

Hello,

Please take a look at the attached picture. There is a shadow like this at the bottom of every page of a design that I am looking at. Could someone kindly tell me how create this effect? Thanks in advance.

pageCorner.png 7.26 KB
Edited by ryy705 because: n/a
  • 3 Contributors
  • 3 Replies
  • 92 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ryy705

Dani AI

Generated

— glad positioning did the trick. For readers wanting alternatives to an image slice (and to avoid extra markup), two modern, flexible options are useful: a targeted CSS shadow and a pseudo-element gradient. Both scale with responsive layouts and avoid managing extra assets.

Use a single bottom-only shadow with box-shadow (clean and resolution-independent):

.container {
  /* offset-x offset-y blur spread color */
  box-shadow: 0 10px 20px -8px rgba(0,0,0,0.35);
}

Negative spread pulls the blur inward so the effect stays mostly under the element. See box-shadow (MDN) for details and browser notes.

For a softer, full-width fade you can draw the shadow with a pseudo-element and a gradient:

.container { position: relative; }

.container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0));
}

This gives precise control over height and falloff. See ::after (MDN) and linear-gradient (MDN).

Notes: stack multiple box-shadow layers for richer depth, use SVG or a 2x PNG for older-browsers/retina fallbacks, and ensure the shadow element does not capture clicks (pointer-events: none). Both approaches are lighter to maintain than image slices and work well with responsive designs.

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

It's a background image? Look at the page in Inspect Element mode (Chrome or FF) and see the underlying CSS. You'll probably see a background image there somewhere.

Member Avatar for macneato

I would position my container relative, then add another class within it called "shadow" and do the following

.shadow {
position:absolute;
background: url() no-repeat; /* your image sliced from where the white background ends */
left:0;
bottom: -10px; /* the size of the image */
width: 200px /*size of the image */
height: 20px /* the height of the image */
}
Edited by macneato because: n/a
Member Avatar for ryy705

thanks. positioning worked.

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.