Custom shadow with CSS

Question

How do I make a shadow per the image below? I don't have any idea how to do that.

So when you have some code to show us please update your question — Sfili_81, Nov 11 '19 at 07:47

score 1 · Accepted Answer · answered Nov 11 '19 at 09:03

1

One way you can do it is by styling the pesedo elements ::before and ::after like this:

div {
  width: 300px;
  height: 400px;
  background: #FFF;
  margin: 40px auto;
  position: relative;
}

div::before,
div::after {
  z-index: -1;
  position: absolute;
  content: "";
  width: 50%;
  height: 50%;
  right: 10px;
  top: 10px;
  max-width: 300px;
  background: #777;
  box-shadow: 15px 0px 10px #777;
  transform: rotate(3deg);
}

div::after {
  transform: rotate(-3deg);
  top: calc(50% - 10px);
}

<div></div>

This see pen for more shadow styling.

answered Nov 11 '19 at 09:03

Kalimah

11,217
11
43
80

thanks, now its more look alike. Also how bout curved block? – Khujand Nanocoding Nov 11 '19 at 10:10
One way to do a curve block (or give the illusion of one) is to create a large radial background-gradient and position it accordingly. Also, if you place the shadow element over another element it might give that effect. – Kalimah Nov 11 '19 at 10:18
Could you help me with this curve? – Khujand Nanocoding Nov 11 '19 at 10:36
I think this merits to open a new question. I also recommend reading more about radial gradients here: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient – Kalimah Nov 11 '19 at 11:29

Custom shadow with CSS

1 Answers1