【CSSでグラデーション】厳選、コピペ用ソース作成ツール

2019-03-31 05:29

cssでグラデーションを簡単に作れるジェネレーターや参考サイトを紹介します。

グラデーションを提案してくれる参考サイト
カスタム性の高いジェネレーター
グラデーションの例

グラデーションを提案してくれる参考サイト

なかなか綺麗な配色が思いつかない、イメージがわかないというときはグラデーションを提案してくれるサイトがオススメです。もちろんそのままコピペ実装もできます。

shade
base colorとGradient Spreadをそれぞれ調整できます。
右下の「background-image: linear-gradient(-90deg, #72EEE9, #D96E5E);」がCSSとなります。
しかし、これだけだとEIやFirefox、などなどのベンダープレフィックスが入っていないのがネックですね。

uigradients
左上の「Show all Gradiendts 」からたくさんの配色例を見る事ができます。そして右上の「<>」からコピペ用のCSSを取得できます。
また「 Rotate Gradient」からグラデーションの向きを回転させることができます。

カスタム性の高いジェネレーター

Ultimate CSS Gradient Generator
PhotoshopやIllustratorのような感覚でグラデーションを調整できます。

こちらの優秀な点は様々なブラウザに対応できる、ベンダープレフィックスをつけてくれるところです。

グラデーションの例

[0%]#FFBFBF  [50%]#DEEDDA  [100%]#F1F2AE

gold

Silver

[0%]#FFCE9E [50%]#FFE16D [100%]#F4CBC3

[57%]#C6EDF4 [57%]#798BC4