🎨

Gradient Text Generator

gradient · text · css · color · webkit

テキスト

色 1色 2色 3 (任意)

角度フォントサイズ太さ

Gradient Text

CSS

.gradient-text {
  background-image: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 700;
}

使い方

1
テキストと2〜3色を選びます。
2
角度・サイズ・太さを調整します。
3
生成されたCSSをコピーします。

FAQ

このツールは無料ですか？

はい、登録もインストールも不要で、すぐに完全無料で使えます。

このツールはどんなツールですか？

なめらかな色のグラデーションを作り、そのまま使えるCSSを出力するツールです。色や方向を視覚的に調整して、コードをサイトにコピーできます。すべてブラウザ内で動作します。