CODEWITHSUNDEEP
cssgradientdropshadow
Sam Kelham
Sam Kelham

Reputation: 1

drop shadow CSS with a gradient

Im working on a project using HTML and CSS and I want to replicate something like this used on this site.

http://slb.com/hse/hse_policy.aspx

The drop shadow that surrounds the container div around the top and more importantly how do you get a gradient on the shadow so it fades out towards the bottom? I know how to get the actual drop shadow.

Cheers

Upvotes: 0

Views: 421

Answers (3)

Ana
Ana

Reputation: 37179

Over a decade later, the linked page 404s, so I can't know exactly what it looked like, but the best way to get a gradient shadow is to use a pseudo-element with a lightweight SVG filter.

This has the advantage of working cross-browser (support should go all the way back to IE11!) and not needing any extra tricks for an element with a (semi)transparent background and perhaps even rounded corners.

html, body, h1 { display: grid }

html { height: 100% }

body { background: url(https://images.unsplash.com/photo-1676037568059-d523f6ec157a?w=1400) 50% 100%/ cover }

svg[width='0'] { position: absolute }

h1 {
  place-self: center;
  position: relative;
  border: solid 4px currentcolor;
  padding: .25em;
  border-radius: .5em;
  font: 900 8vw indie flower, purisa, comic sans ms, cursive;
  text-shadow: 1px 1px 1px #fff
}

h1::before {
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, mediumvioletred, transparent);
  filter: url(#f);
  content: ''
}
<svg width='0' height='0'>
  <filter id='f' x='-50%' y='-50%' width='200%' height='200%'>
    <feColorMatrix values='0 0 0      0 0
                           0 0 0      0 0
                           0 0 0      0 0
                           0 0 0 999999 0' 
                   result='black-copy'/>
    <feGaussianBlur stdDeviation='16' in='SourceGraphic'/>
    <feOffset dx='19' dy='13'/>
    <feComposite operator='out' in2='black-copy'/>
  </filter>
</svg>

<h1>... and stay alive</h1>

Upvotes: 1

feeela
feeela

Reputation: 29922

Well, obviously they use a background image (http://slb.com/images/gradient_1120.jpg) for that purpose. But you could as well add some elements (which could be pseudo elements) before the body and give them a gradient as background.

#bg-element-left {
    /* background-gradient from top right to bottom left */
}

#main content {
    /* styled as you wish */
}

#bg-element-right {
    /* background-gradient from top left to bottom right */
}

Upvotes: 0

PhonicUK
PhonicUK

Reputation: 13864

There isn't a way of doing that with pure CSS. The site you linked uses a large image to do this: http://slb.com/images/gradient_1120.jpg - You you'd need to do something similar to get the same effect.

Upvotes: 0

Related Questions