CODEWITHSUNDEEP
css
JoJo
JoJo

Reputation: 20115

How to make elliptical inner shadow with CSS?

I want an elliptical inner shadow like this. It should fade to complete transparency on the left and right edges.

enter image description here

So far, I've only been able to attain the following. It doesn't even look like an ellipse anymore.

enter image description here

#someDiv {
    background: -moz-radial-gradient(
        50% 0%, 
        ellipse farthest-corner, 
        rgba(255,0,0,1) 0%, 
        rgba(255,0,0,0.00) 70%
    );
    border: 3px solid black;
    width: 30em;
    height: 20em;
}

Upvotes: 4

Views: 3111

Answers (3)

Urooj Khan
Urooj Khan

Reputation: 177

Use This Code For Elegant elliptical Shadow

<div class="box shadow-arch-center"></div>

.box {
  background-color: #9C9369;
  width: 200px;
  height: 50px;
  margin: 50px auto;
}

.shadow-arch-center {
  position: relative;
}

.shadow-arch-center:before, .shadow-arch-center:after {
  position: absolute;
  content: "";
  bottom: 10px;
  z-index: -10;
}

.shadow-arch-center:before {
  left: 2%;
  right: 65%;

  /* as box-shadows get smaller, opacities increase */
  box-shadow: 80px 0px 20px 22px hsla(0, 0%, 0%, .01),
              70px 0px 20px 20px hsla(0, 0%, 0%, .02),
              60px 0px 20px 18px hsla(0, 0%, 0%, .04),
              50px 0px 20px 16px hsla(0, 0%, 0%, .08),
              40px 0px 20px 14px hsla(0, 0%, 0%, .16),
              30px 0px 20px 12px hsla(0, 0%, 0%, .16),
              20px 0px 20px 10px hsla(0, 0%, 0%, .25),
              10px 0px 20px 2px hsla(0, 0%, 0%, .5),
              0 0 20px 2px hsla(0, 0%, 0%, 1);

  transform: skewY(5deg);
}

.shadow-arch-center:after{
  left: 65%;
  right: 2%;

  /* as box-shadows get smaller, opacities increase */
  box-shadow: -80px 0px 20px 22px hsla(0, 0%, 0%, .01),
              -70px 0px 20px 20px hsla(0, 0%, 0%, .02),
              -60px 0px 20px 18px hsla(0, 0%, 0%, .04),
              -50px 0px 20px 16px hsla(0, 0%, 0%, .08),
              -40px 0px 20px 14px hsla(0, 0%, 0%, .16),
              -30px 0px 20px 12px hsla(0, 0%, 0%, .16),
              -20px 0px 20px 10px hsla(0, 0%, 0%, .25),
              -10px 0px 20px 2px hsla(0, 0%, 0%, .5),
              0 0 20px 2px hsla(0, 0%, 0%, 1);

  transform: skewY(-5deg);
}

Upvotes: 0

Michael Mullany
Michael Mullany

Reputation: 31750

These are pretty close to what you need:

I would use new style syntax for mozilla: -moz-radial-gradient(center -10px, ellipse farthest-side, #ab0000, #ffffff 100%);

And something like this old-style syntax for webkit: -webkit-gradient(radial, 325 -530, 600, 265 -235, 200, from(white), to(white), color-stop(.8,red),color-stop(.9,red))

This will need some tweaking

Upvotes: 0

user578895
user578895

Reputation:

replace ellipse farthest-corner with something like 70% 20% and tweak from there.

edit: http://jsfiddle.net/ufLYQ/

Upvotes: 2

Related Questions