CSS Gradient Text Generator

Generate gradient text using background-clip: text. 8 presets (sunset, ocean, rainbow, fire, and more), custom multi-color stops, live preview, copy CSS + HTML.

预设

文字内容

字号72px

粗细800

渐变角度90°

色标 (2/6)

位置0%

位置100%

预览

AIPZZ 渐变文字

CSS

background: linear-gradient(90deg, #ff6b6b 0%, #ffd93d 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-size: 72px;
font-weight: 800;

HTML (内联)

<h1 style="background: linear-gradient(90deg, #ff6b6b 0%, #ffd93d 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-size: 72px; font-weight: 800;">AIPZZ 渐变文字</h1>

Design Tools · Related Tools

→