如何实现渐变为实色背景而非透明的模糊效果？

我明白你想要的效果——就是卡片底部的模糊区域不是淡出成透明，而是平滑过渡到页面的深色背景色，同时上面的文字也能跟着有渐变层次感、和背景自然融合对吧？之前用绝对定位的backdrop-blur元素加mask的思路方向是对的，只是没把实色背景和模糊层结合好，咱们来调整下代码：

核心思路是让模糊层同时具备backdrop-blur效果和从页面底部实色到透明的线性渐变，再配合mask控制过渡范围，同时给文字加透明渐变mask，让两者衔接更自然。

下面是修改后的完整代码：

<main class="min-h-screen bg-gradient-to-b from-[#0E1717] to-[#060A0A]">
  <section class="text-white max-w-4xl mx-auto p-4">
    <!-- 外层卡片容器 -->
    <div class="bg-gray-500/40 rounded-lg p-4 relative overflow-hidden">
      <!-- 带渐变透明的文字 -->
      <p class="text-xl mask-b-from-70% mask-b-to-100% mask-opacity-0">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis in doloribus nobis unde, minus accusamus quam dignissimos natus! Atque recusandae exercitationem laboriosam quae quis impedit velit unde labore necessitatibus ab? Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, nulla natus. Ad nemo quos totam sint ex, blanditiis ipsa aliquam beatae animi tempore autem illum veniam id soluta excepturi harum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quidem vitae nihil aspernatur beatae laborum saepe enim ex iure molestiae corporis temporibus nulla ipsum, at necessitatibus adipisci sunt aliquam. Quo!
      </p>
      <!-- 底部模糊过渡层 -->
      <div class="pointer-events-none absolute bottom-0 left-0 w-full h-[70%] 
        backdrop-blur-3xl 
        bg-gradient-to-t from-[#060A0A] to-transparent
        mask-t-from-0% mask-t-to-70% mask-opacity-100
      "></div>
    </div>
  </section>
</main>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

给你拆解下关键调整的作用：

• 外层卡片：去掉了多余的mask属性，加上overflow-hidden确保内容不会跑出卡片圆角。
• 文字部分：mask-b-from-70% mask-b-to-100% mask-opacity-0让文字从70%高度的位置开始，到底部逐渐变为透明，和下面的模糊层无缝衔接，不会出现文字突然消失的生硬感。
• 模糊过渡层：
  • bg-gradient-to-t from-[#060A0A] to-transparent：直接用页面底部的背景色向上渐变到透明，让模糊层底部和页面背景完全融合。
  • backdrop-blur-3xl：保留模糊效果，模糊下方的卡片内容和页面背景。
  • mask-t-from-0% mask-t-to-70% mask-opacity-100：让模糊层的顶部从0到70%高度范围平滑淡出，衔接卡片的半透明背景，不会有突兀的边界。
  • pointer-events-none：保证这个层不会干扰文字的选择或其他交互。

你可以根据需求微调这些参数：比如修改h-[70%]调整模糊层的高度，调整mask的百分比改变过渡范围，或者修改backdrop-blur-3xl换成更小的数值降低模糊强度，直到和你想要的参考效果完全匹配~

内容来源于stack exchange