CSS 不渗透文本的渐变

CSS gradient without bleeding through text

我正在尝试创建背景渐变,但它会渗透到文本中。我做了一些谷歌搜索,但没能找到有用的东西。我在 css 方面不是最好的,而且我以前也从来没有做过这样的事情。感谢您的帮助!

将渐变作为 h1 标签的背景是行不通的,因为随着屏幕变大,h1 也会随之变大并扭曲渐变。

实际

预计

添加 z-index: -1 到我的 :before 伪元素给了我想要的结果