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/
9 Answers
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.
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>
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>
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.
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");
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>
-
For improve as example: just adding to .gr position: relative;left:5px;top:5px; jsfiddle.net/v12hLfz9/7 Jun 25, 2018 at 9:05
Unfortunately, this is not possible. I suggest just using a div with a background-image that you create on Photoshop or likewise.
-
Ok, not a big deal. I was hoping to use CSS3 only, but since I see that it isn't possible I'll just skip the idea. ;) Mar 10, 2012 at 20:56
-
1I wouldn't be so quick to shoot down the idea. Even if you use a div the background-image could be a gradient, which the browser renders in it's native code and doesn't require downloading any resources.– redbmkApr 5, 2013 at 16:47
-
1True - but that would just create the illusion of an inset box-shadow. The question asks specifically if a box-shadow can be given a gradient rather than a solid colour. Apr 6, 2013 at 10:52
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%);
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;
}