CSS Box Div Dropping Shadow with Gradient

How can I correctly add a shadow and a gradient to my triangular shape?

Here is an idea with skew transformation and drop-shadow filter. You simply need some extra element to correctly have the gradient. The trick is to invert the skew to keep the gradient direction correct (not needed if we deal with solid color)

.box {  width: 150px;  height: 150px;  position: relative;  z-index:0;  overflow: hidden;  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));}
.box span {  position: absolute;  z-index:-1;  top: 0;  width: 50%;  height: 100%;  overflow: hidden;}
.box span:first-of-type {  left: 0;  transform: skewY(35deg);  transform-origin: top right;}
.box span:last-of-type {  right: 0;  transform: skewY(-35deg);  transform-origin: top left;}
.box span::before {  content: "";  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background: linear-gradient(to bottom, blue , red );  transform-origin: inherit;}
.box span:first-of-type::before {  transform: skewY(-35deg);}
.box span:last-of-type::before {  transform: skewY(35deg);}
p { margin:0; color:#fff; font-size:45px; line-height:100px; text-align:center;}

<div class="box">  <span></span><span></span>  <p>29</p></div>

is it possible to have a drop shadow be a gradient?

It is possible to emulate that using a gradient on an absolutely positioned pseudo-element, with a z-index such that it appears underneath its parent element.

HTML:

<div class='e'></div>

CSS:

.e {
    position: relative;
    width: 10em;
    height: 10em;
    margin: 1em;
    background: lemonchiffon;
}
.e:before {
    position: absolute;
    z-index: -1;
    top: 10%; left: 10%;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, navy);
    content: '';
}

If you want the shadow to have a faded edge, then you'll have to give the pseudo-element an inset shadow (same colour as the background of .e's parent).

box-shadow: inset 0 0 .5em .5em white;

Note that this won't work in IE9 and older. You can use filter gradients for those, but not on pseudo-elements, so what you would have to do in this case would be to add a child to the element (just for IE) and style it just like you style the pseudo-element.

---

EDIT: If you want this to work over an image, gradient background, then I'm afraid it's a bit trickier and it cannot be done using just CSS in IE9 and older. However, in the current versions of the other browsers, this can be achieved using a linear gradient and three radial gradients.

Relevant CSS:

.e {
    width: 25em; /* give it whatever width and height you like */
    height: 25em;
    /* make padding on right and bottom larger by adding the amount taken by
     * the "shadow"
     */
    padding: 5% 10% 10% 5%;
    box-sizing: border-box;
    /* change navy to red in each of these at one time to see what each
     * gradient covers
     */
    background:radial-gradient(at top right, navy, transparent 70.71%) 0 100%,
        radial-gradient(at top left, navy, transparent 70.71%) 100% 100%,
        radial-gradient(at bottom left, navy, transparent 70.71%) 100% 0,
        linear-gradient(navy, transparent) 50% 100%;
    background-repeat: no-repeat;
    background-size: 95% 95%, 5%, 5%, 5% 95%, 90% 5%;
}

CSS3 Box-Shadow Linear Gradient?

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

How can I simulate a basic drop shadow using border-image and linear-gradient?

For the short border to work you need to change the

100 repeat;

to

0 0 100 0 repeat;

.box{  /* the "shadow" */  border-image:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 0 0 100 0 repeat;    border-image-outset: 0px 0px 6px 0px;    border-width: 0px 0px 6px 0px;    border-style: solid;     /* other stuff */  font-family: sans-serif;  font-size: 20px;  color: #FEFEFE;  background: #007277;  margin: 10px 0px;  float: left;  clear: left;  padding: 50px;}

<div class="box">Here's longer text, where the "shadow" appears how I want it to.</div>
<div class="box">Short</div>

---

Related Topics