Bhupinder kumar Bhupinder kumar - 12 days ago 8
HTML Question

i need the exact shadow with css not with image for input field

Hi Im facing issue while i am making this with css http://prntscr.com/dbkjn2

Answer

If you can wrap your input with a label, you could do something like this, where you combine pseudo elements with a rotation.

.shadow {
  position: relative;
}
.shadow::before,
.shadow::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 40%;
  height: 100%;
  top: -5px;
  background: transparent;
  box-shadow: 0px 10px 5px #bbb;
}
.shadow::before {
  left: 10%;
  transform: rotate(-5deg);
}
.shadow::after {
  right: 10%;
  transform: rotate(5deg);
}
<label class="shadow"><input type="text"></label>

Here is a 2:nd sample, using gradient

.shadow {
  position: relative;
}
.shadow::before,
.shadow::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 45%;
  height: 95%;
  top: 6px;
  background: transparent;
  opacity: 0.7;
}
.shadow::before {
  left:5%;
  transform: rotate(-5deg);
  background: linear-gradient(to bottom left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
.shadow::after {
  right:5%;
  transform: rotate(5deg);
  background: linear-gradient(to bottom right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
<label class="shadow"><input type="text"></label>

These 2 can of course be combined in many ways to achieve different shadow effects.

With box-shadow one can add several shadows in a row: How to make the new long shadow trend with CSS?

With gradient one can use different angles 90deg instead of to bottom right and so on.