Menu
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/
605
Now, if we want to add a gradient-y box shadow behind this box, we can do it using a ::before pseudo-element around it and makes it looks like a shadow. As you can tell, since we want a gradient shadow, we're using linear-gradient as the background of the pseudo-element.
To the pseudo class, add the linear-gradient of the desired color, with the desired direction to the background property. Add the filter blur property to pseudo class to make it look like a shadow of the parent element, otherwise it will look like a border.
To create a radial gradient that repeats so as to fill its container, use the repeating-radial-gradient() function instead. Because <gradient> s belong to the <image> data type, they can only be used where <image> s can be used.
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>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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
