CODEWITHSUNDEEP
cross-browsercsslinear-gradients
Oliver Spryn
Oliver Spryn

Reputation: 17368

CSS3 Box-Shadow Linear Gradient?

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/

Upvotes: 48

Views: 197089

Answers (8)

Wilem2
Wilem2

Reputation: 192

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%);

Upvotes: 0

Marie Cornellier
Marie Cornellier

Reputation: 201

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>

Upvotes: 20

Alex Yursha
Alex Yursha

Reputation: 3428

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.

Upvotes: 3

Niv&#39;O
Niv&#39;O

Reputation: 406

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.

Upvotes: 37

Ignacio Ramos
Ignacio Ramos

Reputation: 61

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

Upvotes: 2

redbmk
redbmk

Reputation: 4796

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>

Upvotes: 25

ink
ink

Reputation: 101

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.

Upvotes: 5

jacktheripper
jacktheripper

Reputation: 14239

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

Upvotes: 1

Related Questions