幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator

ヒーローヘッダに使用する幅いっぱいの画像に与えるさまざまなグラデーションのスタイルシートを1クリックで生成できるジェネレーターを紹介します。

グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出来映えを確認しながら生成できます。

サイトのキャプチャ

The Hero Generator
The Hero Generator -GitHub

使い方は、簡単です。
さっそく試してみました。

ヒーローヘッダに使用されている画像は、「Upload a new image」から画像をアップロードして変更できます。

サイトのキャプチャ

The Hero Generator

グラデーションの種類やカラー、タイトルやボタンなどはカスタマイズできます。

サイトのキャプチャ

カスタマイズ後

カスタマイズが完了した後は、「code」ボタンをクリックするだけで、実装コードが生成されます。

サイトのキャプチャ

コードの生成

生成されたコードは、下記の通りです。

The Hero Generatorには、さまざまなグラーデションが用意されています。

サイトのキャプチャ

Gradient Overlay: Circular

サイトのキャプチャ

Gradient Overlay: Up

サイトのキャプチャ

Gradient Overlay: Down

サイトのキャプチャ

Gradient Overlay: ↘

サイトのキャプチャ

Gradient Overlay: ↗

sponsors

top of page

©2020 coliss