CSS3 Box-Shadow Linear Gradient?

Question

Is there a way in CSS3 to create a cross-browser (i.e.: Mozilla, Webkit, and Opera) inset box shadow that will transition from black on top to white on the bottom? The closest way that I have found to do this only allows the outside of the shadow to be one color, then transition to another color on the inside, on this page: http://www.css3.info/preview/box-shadow/

Answer 1

Take a look at this video by Lea Verou. The section I linked to talks about something very similar, where you use background-image gradients to make something like a box-shadow. If I can figure out a good working example I'll post an answer, but this should give you a good place to start. You can also do some really cool stuff, like a box shadow curl with the :after pseudo-class to make a shadow appear.

Here are a few simple examples at the top and bottom of a box, and underlining some text. You'll have to play around with it (a lot, probably) to get it to look how you want, but css has some really awesome features (and there will be more and more).

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background:
    radial-gradient(at 50% 0, black, transparent 70%),
    linear-gradient(0deg, black, transparent 50%) bottom;
  background-size: 100% 15px;
  background-repeat: no-repeat;
}

.underline {
    width: 6em;
    text-align:center;
    font-size:30px;
}

.underline:after {
    content: '\00a0';
    background-image:
      radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}

<div class="container">
  <div class="underline">Hello, world!</div>
</div>