How to Create a Light Oval-Shaped CSS3 Shadow

How to create a light oval-shaped CSS3 shadow

I use a combination of box-shadow, border-radius and clip.

http://dabblet.com/gist/2225507

Create css wave form

CSS Gradients

This is possible with CSS gradients but I would really recommend using an SVG alternative as the lines in CSS will be jagged

div {  border: 2px solid black;  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 55%, rgba(38, 155, 3, 1) 50%, rgba(38, 155, 3, 1) 56%, rgba(38, 155, 3, 1) 57%, rgba(38, 155, 3, 1) 58%, rgba(169, 3, 41, 1) 60%, rgba(169, 3, 41, 1) 67%, rgba(169, 3, 41, 1) 68%, rgba(109, 0, 25, 1) 69%, rgba(109, 0, 25, 1) 100%);  background-position: -325px -5px;  background-size: 700px 300px;  width: 200px;  height: 200px;

<div></div>

Box shadow circle

I'd suggest:

div {
    width: 50px;
    height: 50px;
    background-color: #e65525;
    border-radius:50%;
    box-shadow: 0 0 0 3px #e78267;
}

JS Fiddle demo.

The problem you had was in your box-shadow: 3px 3px 3px #e78267; line, in turn:

• 3px (the first) is the horizontal offset,
• 3px (the second) is the vertical offset,
• 3px (the third) is the 'blur' distance.

I've changed that to box-shadow: 0 0 0 3px #e78267;, because:

• a zero offset (for both horizontal and vertical) means the shadow is centred around the shape itself,
• the third zero provides a blur distance of 0, annd
• the 3px gives a 'spread' (so you that a solid 'shadow' is given, rather than a blurred shadow).

References:

• box-shadow (MDN: CSS).
• box-shadow (W3.org.

Css shadow applying to svg box

The right way to use svg shadows:

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">  <defs>    <filter id="shadow">      <feDropShadow dx="4" dy="8" stdDeviation="4"/>    </filter>  </defs>
  <ellipse cx="200" cy="80" rx="100" ry="50"      style="fill:blue; filter:url(#shadow);"/></svg>

CSS oval shape cut out from div

You can start from this Running Demo

Note: I've added a small animation to change the background color just to clear that the space between the island and the div with the cutout is really transparent.

HTML

<div class="cutout">
    <div class="island">
        <div id="circleText">Circle Text </div>
    </div>
</div>

CSS

.cutout {
    height: 10em;
    background: radial-gradient(ellipse 200px 150px at 50% 100%, 
                                transparent 100px, #555 50px);
    position: relative;
}
.island {
    position: absolute;
    left: calc(50% - 150px);
    bottom: -50%;
    width: 300px;
    background: radial-gradient(ellipse 200px 150px at 50% 50%, 
                                silver 90px, rgba(0, 0, 0, 0) 50px);
    height: 10em;
}
.island > div {
    position: absolute;
    left: 80px;
    right: 80px;
    top: 30px;
    bottom: 30px;

    background: rgba(fff, 0, 0, 0.2);
    padding: 5px;    
    text-align: center;    
}

#circleText {
    padding-top: 30px;
    font-size: 1.5em;
}

---

Related Topics