CODEWITHSUNDEEP
htmlcssbox-shadow
Aphire
Aphire

Reputation: 1652

Box-Shadow Arc CSS

I am attempting to replicate something similar to this:

enter image description here

Where the shadow from the bottom of the div arcs somewhat, being higher at the center and then thinning out into nothing further out.

I wonder if this can be achieved with some kind of box-shadow effect in css. Currently I have a box shadow coming up from the bottom of my div that stays flat the entire way along.

Current box-shadow as requested:

box-shadow: inset 0 -30px 30px -30px #888888;

Any suggestions appreciated.

Upvotes: 1

Views: 959

Answers (3)

Persijn
Persijn

Reputation: 15000

Here is a solution using radial gradient to create the shadow. Mine uses pixel sizes, this can be changed to percentage if you want it to span over the entire page instead of under the text/menu links.

.menu {
  height: 100px;
  background: radial-gradient(ellipse 100% 7% at 50% 100%, rgba(55, 55, 55, 0.5) 200px, rgba(55, 55, 55, 0.1) 360px, white 380px);
  text-align: center;
}
.menu .menu-item {
  padding-left: 2%;
  padding-right: 2%;
}
<header class="menu">
  <h1>Rolex</h1>
  <span class="menu-item">watches</span>
  <span class="menu-item">about rolex</span>
  <span class="menu-item">world of rolex</span>
  <span class="menu-item">retailers</span>
  <span class="menu-item">whishlist</span>
</header>

Upvotes: 4

sandeep pandharpure
sandeep pandharpure

Reputation: 39

put this class box-shadow: 0 10px 6px -6px #777;

Upvotes: 0

Greg
Greg

Reputation: 31378

You could create a pseudo selector that inserts some content on to the page, make it rounded and apply the box shadow to it. Note the z-index to make it go behind the parent:

http://plnkr.co/edit/UhdRAuJ0VIPHrnufkwm9?p=preview

.shadowy {
  position: relative;
  width: 100%;
  height: 40px;
  border: 1px solid black;
  margin-top: 100px;
  background: white;
}

.shadowy:before {
  content: '';
  position: absolute;
  background: transparent;
  top: 0;
  left: 10%;
  width: 80%;
  height: 20px;
  box-shadow: 0 0 30px black;
  border-radius: 100%;
  z-index: -1;
}

Upvotes: 2

Related Questions