CSSでテキストにグラデーション！「Gradient Text Generator」

WEB

2019.09.202019.09.18

さて、グラデーションジェネレーターシリーズも第3段、今回はテキストにCSSでグラデーションをかけられるジェネレーターです。

Gradient Text Generator
Gradient Text Generatorの使い方
Gradient Text Generatorまとめ

Gradient Text Generator

こちらは設定できる項目は少ないのですが、そのぶんシンプルで使いやすいです。

Gradient Text Generatorの使い方

Gradient Text Generatorの画面の見方

インターフェースもシンプルです。

「This is How Gradient Text Looks! 」がプレビュー。
その下の6つの楕円がグラデーションの色サンプル。
楕円の色サンプルの右がグラデーションの方向。
「Gradient CSS/HTML Code」ボタンをクリックするとHTMLコードとCSSコードを書きだしてくれます。

色の選択

楕円の色サンプルをクリックすると、一呼吸おいてプレビューの色が変わります。

表示されている色サンプルに気に入ったものが無い場合は「Load More Gradients」をクリックすると、別のサンプルが6つ表示されます。

グラデーションの方向

色サンプルの右、Gradient Orientationはグラデーションの方向です。

・Right Direction…右方向
・Left Direction…左方向
・Bottom Direction…下方向
・Top Direction…上方向

デフォルトは右方向です。

生成されたコードをコピペ！

設定ができたら「Gradient CSS/HTML Code」ボタンをクリック。

ウインドウが開き、CSSとHTMLが表示されます。

コピペしてテキストを変更するだけ！簡単！

CSSでテキストにグラデーション

上のサンプルのHTMLコードはこうなっています。
デフォルトはh1タグでしたがpタグに変更しています。

<p class="text-gradient">
 CSSでテキストにグラデーション
</p>

CSSはジェネレーターのコードそのままです。
フォントが太くなり、センタリングされています。こちらはお好みで変更して下さい。

.text-gradient{
        font-weight: bold;
        text-align: center;
        background: #314dea; /* fallback for old browsers */
        background: -webkit-linear-gradient(left, #314dea 15%, #9455dc 40%, #ec5d57 70%, #ec5d57 100%);
        background: linear-gradient(to left, #314dea 15%, #9455dc 40%, #ec5d57 70%, #ec5d57 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

同じサイト内に2つ以上このジェネレータで作ったコードを使用する場合は、クラス名「text-gradient」をそれぞれ変えてあげて下さいね！
こんな感じです。

CSSでテキストにグラデーション

HTML

<p class="text-gradient2">
 CSSでテキストにグラデーション
</p>

CSS

.text-gradient2{
        font-weight: bold;
        text-align: center;
        background: #00416a; /* fallback for old browsers */
        background: -webkit-linear-gradient(left, #00416a, #799f0c, #ffe000);
        background: linear-gradient(to left, #00416a, #799f0c, #ffe000);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }