如何在CSS中创建细腻复杂的蛋壳质感渐变？

请问创建图中这类细腻复杂渐变的最佳方案是什么？我尝试查看该元素的CSS，但它可能是通过Canvas JavaScript设置的。
我不确定这是线性渐变，还是由多层不同透明度的渐变叠加而成。
看起来左上角有一块靛蓝色区域，左下角有一块桃色区域。

我的尝试代码 #

body{
    background: rgb(229,232,236);
background: linear-gradient(90deg, rgba(229,232,236,1) 0%, rgba(229,232,236,1) 35%, rgba(231,217,219,1) 74%, rgba(231,221,224,1) 100%);
}

.container{
  height: 100vh;
  width:100%;
}

<div class="container">

</div>

参考示例代码 #

JSX代码 #

'use client';

import gsap from 'gsap';
import { useLayoutEffect, useRef } from 'react';

import { Section } from '~/components/ui';
import { cx } from '~/utils';

import styles from './ExoIrisGradientTransition.module.scss';

export const ExoIrisGradientTransition = () => {
  const containerRef = useRef(null);

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      if (!containerRef.current) return;
      gsap.to('.js__solid', {
        opacity: 1,
        scrollTrigger: {
          trigger: '.js__gradientContainer',
          start: '80% bottom',
          end: 'bottom bottom',
          // markers: true,
          scrub: true,
        },
      });
    }, containerRef);

    return () => {
      ctx.revert();
    };
  }, []);

  return (
    <Section className={styles.container} ref={containerRef}>
      <div className={cx(styles.gradientContainer, 'js__gradientContainer')}>
        <div className={cx(styles.gradient, 'js__gradient')} aria-hidden />
        <div className={cx(styles.solid, 'js__solid')} aria-hidden />
      </div>
    </Section>
  );
};

CSS代码 #

.container {
  position: relative;
  display: flex;
  background: transparent;
  flex-flow: column nowrap;
  z-index: 5;
}

.gradientContainer {
  --container-height: 160vh;
  height: var(--container-height);
  position: relative;
  width: 100%;

  @include landscape {
    --container-height: 200vh;
  }
}

.gradient {
  width: 100%;
  height: var(--container-height);
  background: linear-gradient(
    180deg,
    rgba(236, 194, 111, 0.5) 0%,
    rgba(110, 153, 234, 1) 65%,
    rgba(8, 11, 27, 1) 100%
  );

  @include landscape {
    background: linear-gradient(
      140deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(236, 194, 111, 1) 33%,
      rgba(110, 153, 234, 1) 66%,
      rgba(8, 11, 27, 1) 100%
    );
  }
}

.solid {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: var(--container-height);
  background: $color-dark-dark-blue;
  opacity: 0;
}

最佳实现方案 #

针对图中这类细腻渐变，推荐以下几种方案，按实现成本和效果排序：

1. 多层CSS渐变叠加（最易实现） #

不需要JS/Canvas，通过叠加多个线性/径向渐变，配合不同透明度和角度，就能模拟出复杂的色彩过渡效果。核心是利用不同角度、不同透明度的渐变层叠加，混合出自然细腻的色彩过渡，完全通过CSS实现，性能优异：

.container {
  background: 
    linear-gradient(135deg, rgba(75, 0, 130, 0.3) 0%, transparent 50%),
    linear-gradient(45deg, rgba(255, 192, 203, 0.4) 0%, transparent 60%),
    linear-gradient(to right, #e5e8ec, #e7d9db);
}

2. CSS径向渐变+线性渐变组合 #

如果图中的色彩分布是边角聚集的（比如你提到的左上角靛蓝、左下角桃色），用径向渐变定位配合线性渐变能更好地模拟：

.container {
  background: 
    radial-gradient(circle at top left, rgba(75, 0, 130, 0.4) 0%, transparent 40%),
    radial-gradient(circle at bottom left, rgba(255, 192, 203, 0.3) 0%, transparent 50%),
    linear-gradient(to right, #e5e8ec 0%, #e7d9db 100%);
}

3. Canvas绘制（极致自定义） #

如果需要动态变化或更复杂的色彩算法，才需要用到Canvas。核心思路是通过createLinearGradient/createRadialGradient创建渐变，或者直接用像素级操作生成渐变，但实现成本较高，适合需要交互或动态效果的场景。

4. 滚动交互渐变过渡技巧 #

你提供的参考示例中，通过叠加一个纯色层，结合动画工具改变透明度，实现渐变到纯色的过渡效果。如果你的需求包含滚动交互，可以借鉴这个思路，但基础的复杂渐变本身还是通过多层CSS渐变实现。

内容的提问来源于stack exchange，提问作者The Old County