CSS3 Box-Shadow Linear Gradient? - cross-browser

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

Late to the party, but maybe someone will find it useful!
You can actually do it with multiple shadows on the box-shadow:
box-shadow: inset 0px 33px 25px 0 #000,
inset 0 66px 15px 0px #ccc,
inset 0 99px 5px 0px #fff;
codepen example : https://codepen.io/InFecT3D/pen/JQdmeL
Side note: it might be a little "hacky" approach, but in some cases it helps.

Answer 2

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>

Answer 3

To create a rainbow gradient box shadow:
.innerSquare {
background-color: white;
border-radius: 5px;
height: 100%;
width: 100%;
}
.rainbowGradient {
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
border-radius: 5px;
box-shadow: inset 0 0 12px 12px white, inset 0 0 3px 2px white;
background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
}
<div class="rainbowGradient">
<div class="innerSquare">
<h1>Hello World!</h1>
</div>
</div>

Answer 4

Try using a :before element to set a 'shadow' up.
.classname {
&:before {
content: '';
position: absolute;
display: none;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
z-index: -1;
background: linear-gradient(to bottom, red, blue);
}
&:hover {
&:before {
display: inline-block;
}
}
}
This above code is an example on how to set up such an hover effect.

Answer 5

If the intention is to create a semi-transparent overlay over a background image, then it can be achieved with the following style rule without box-shadow.
background-image: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(255, 255, 255, 0.5)),
url("background.png");
See background-image on MDN.

Answer 6

Two divs are necessary:
1: with the linear gradient + blur:
.gr{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2305a+0,fca832+100 */
background: #f2305a; /* Old browsers */
background: -moz-linear-gradient(left, #f2305a 0%, #fca832 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f2305a 0%,#fca832 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f2305a 0%,#fca832 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2305a', endColorstr='#fca832',GradientType=1 );
filter:blur(10px);
height:200px;
}
2: over the other, the content.
.zz {background:#fff; position: relative; top:-200px;
height:200px;
}
Then:
<div class='gr'></div>
<div class='zz'>BOX</div>
DEMO

Answer 7

Unfortunately, this is not possible. I suggest just using a div with a background-image that you create on Photoshop or likewise.

Answer 8

Another way would be to set a White background, and make a shadow (from black to transparent)
Example:
box-shadow: 0 1px 100px 0 rgb(0 0 0 /30%);

Answer 9

You can use <iframe> to achieve gradient effect on elements like videos or images.
HTML:
<iframe width="720" height="515"
<img src="image.png">
</iframe>
CSS:
iframe{
border:none;
background: -webkit-linear-gradient(90deg, rgb(0, 184, 255), rgb(255, 0, 249));
background: linear-gradient(90deg, rgb(0, 184, 255), rgb(255, 0, 249));
z-index:0;
padding:5px;
}
codepen example