無料iPhone壁紙の
The Wallpaper Art Gallery

【CSS3】グラデーション背景作成ジェネレーター

グラデーションとは、あるエリアもしくはある地点からある方向に向かって色が連続して変化していくグラフィック表現の事を指します。

例えば、端から端へと黒色から白色への色の変化であるとか、中央から外側への色の変化とか....グラデーションはウェブサイトに細やかな変化を与えてくれるものだと思います。

そんなグラデーションがスタイルシート(CSS)で実現!

1クリックで色を選択し、ポチッと作成ボタンを押すだけでグラデーション背景が作れる簡易型グラデーション背景作成ツール。スタイルシート(CSS)で実現出来るグラデーション背景をぜひウェブサイト制作にお役立て下さいませ。(平成28年[2016年]12月14日リリース)

【グラデーションの種類を選沢】
【線形グラデーション】下から上への色彩の変化を表したもので、通常は直線で平行していますが、角度を付けることでより変化のあるグラデーション背景を生成することが出来ます。
【円形グラデーション】放射グラデーションまたは放射状グラデーションとも言います。中央から外へ向けて色彩が変化していくグラデーション背景を生成することが出来ます。楕円型と正円型がございます。
【ブレンドモード】線形グラデーションと背景画像とを重ねて表した背景を生成することが出来ます。
【円形ブレンドモード】円形グラデーションと背景画像とを重ねて表した背景を生成することが出来ます。
開始色
終了色

中間色
角度
ブレンドの種類

グラデーションの種類と色を選択し、「グラデーション背景を作成」をクリックすれば、このエリアにグラデーションを使った背景が見本として表示されます。
 あとは下記に表示されたスタイルシート(CSS)をコピーして、あなたのウェブサイトやブログでお使い下さいませ。

ここに表示されるスタイルシート(CSS)をコピーして下さい。
**コピーする前に上記の枠内を一度クリックして下さい。↑↑
スタイルシートをメールで送る

【グラデーション背景自動作成ツール動作確認】
OS:MacOS Sierra 10.12.3/ブラウザ:Safari、Google Chrome/Javascript:ON

最新のブラウザでお使い下さい。

【対応状況(2017年2月3日現在)】
Google ChromeとSafari(PC版)では正常に作動ししています。
スマホ版Safariではブレンドモードにおいて背景画像が表示されません。
PC版Safariでは「スタイルシートをコピーする」をクリックしても生成されたスタイルシートはコピーされませんが、スマホ版では逆にコピーが出来ます。

【CSS3:グラデーションについて】
線形グラデーション円形グラデーション by HTMLクイックリファレンス

【Special Thanks】

document.execCommand('copy')してみる」 by keiskimu in Qiita
特定の要素のテキストを1クリックでコピーするjavascruptを当ツールで使用。

カラーピッカー」by ckazu in jsdo.it
色を選択するjavascriptを一部改良の上、当ツールで使用。

ページトップへ