没有一种方法可以用纯CSS来做到这一点。您链接的网站使用大图像来执行此操作：http://slb.com/images/gradient_1120.jpg-你需要做类似的事情来获得相同的效果。

很明显，他们使用了背景图像（http://slb.com/images/gradient_1120.jpg）。但是你也可以在主体之前添加一些元素（可能是伪元素），并给予它们一个渐变作为背景。

#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 */
}

十多年后，链接的页面404 s，所以我不能确切地知道它看起来像什么，但获得渐变阴影的最佳方法是使用带有轻量级SVG过滤器的伪元素。
这具有跨浏览器工作的优点（支持应该一直回到IE11！），并且不需要任何额外的技巧来处理具有（半）透明背景甚至圆角的元素。

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>