渐变阴影和电影颗粒文字特效

十月 11, 2023 / Mr.x / 5阅读 / 0评论/ 分类: 创意
渐变阴影和电影颗粒文字特效 — 荣小站
前端 CSS 特效

渐变阴影和电影颗粒文字特效

使用 CSS 实现具有强烈电影颗粒质感的渐变阴影文字效果，包含 3D 透视、多层阴影和噪点纹理。

这是一个非常酷的 CSS 文字特效，结合了渐变填充、3D 透视、多层阴影和噪点纹理。看起来像老电影的海报标题，极具视觉冲击力。

效果演示

USELESS

HTML 结构

<h1 arial-label="USELESS">
  <span>USELESS</span>
</h1>

使用 arial-label 属性来存储要显示的文字，这样可以在 CSS 中通过 attr() 获取文字内容。

CSS 样式

1. 基础设置

@import url("https://fonts.googleapis.com/css2?family=Onest:wght@900&display=swap");

h1 {
  position: relative;
  margin: 0;
  padding: 0;
  perspective: 12px;
  perspective-origin: 50% 0%;
}

使用 perspective 创建 3D 透视效果。

2. 渐变文字（::before 伪元素）

h1::before {
  content: attr(arial-label);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    90deg,
    rgba(91, 75, 128, 1) 6%,
    rgba(203, 30, 49, 1) 29%,
    rgba(231, 146, 49, 1) 53%,
    rgba(236, 17, 26, 1) 75%,
    rgba(115, 91, 133, 1) 94%
  );
  transform: rotateX(45deg);
  mix-blend-mode: difference;
}
  • color: transparent：文字透明
  • background-clip: text：背景只显示在文字区域
  • linear-gradient：多彩渐变
  • mix-blend-mode: difference：混合模式产生独特效果

3. 模糊阴影（::after 伪元素）

h1::after {
  content: attr(arial-label);
  filter: blur(1px) contrast(3);
  text-shadow: 0px 3px 9px #e46e6e, 0px 8px 12px #9e7639;
  mix-blend-mode: hard-light;
}
  • blur(1px)：轻微模糊
  • contrast(3)：增强对比度
  • text-shadow：多层彩色阴影
  • mix-blend-mode: hard-light：硬光混合

4. 背景与噪点

body {
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 1) 30%,
    rgba(41, 14, 14, 1) 70%
  );
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("Noise.png") 0 0;
  background-size: 320px 320px;
  pointer-events: none;
}

使用噪点图片叠加在背景上，产生电影胶片颗粒感。

核心技术点

技术作用
attr(arial-label)从 HTML 属性获取文字内容
background-clip: text文字透明，背景显示在字形中
mix-blend-mode混合模式（difference/hard-light）
filter: blur() contrast()模糊 + 对比度产生特殊效果
text-shadow多层彩色投影
perspective3D 透视效果
Noise 噪点图电影颗粒质感

渐变配色方案

原效果的渐变配色：

background-image: linear-gradient(
  90deg,
  rgba(91, 75, 128, 1) 6%,    /* 深紫色 */
  rgba(203, 30, 49, 1) 29%,   /* 红色 */
  rgba(231, 146, 49, 1) 53%,  /* 金色 */
  rgba(236, 17, 26, 1) 75%,   /* 亮红 */
  rgba(115, 91, 133, 1) 94%    /* 紫色 */
);

使用注意

  • 需要使用支持 background-clip: text 的现代浏览器
  • 字体要足够粗（font-weight: 900）效果才明显
  • 噪点图片可以使用 base64 内联或本地文件
  • 可以修改渐变色来实现不同的风格

#渐变阴影和电影颗粒文字特效(1)

评论