個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。
グラデーションを自分で一から作成するのは結構手間なものです。
そんなとき便利なのが、美しいグラデーション見本でしょう。
そんな美しいグラデーション見本を、ランダムに生成してくれるのが今回ご紹介するツールです。
私のようにズボラな人はもちろんですが、ご参考になれば幸いです。

きれいなCSSグラデーションをランダムに生成する「Random CSS Gradient Generator」

Random CSS Gradient Generatorは、きれいなCSSグラデーションをランダムに生成してくれる無料ツールです。
画面、右上にある「ROLL」というボタンを押せば、次々にグラデーションを生成・表示していってくれます。
美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」
気に入ったものがあれば、隣の「CODE」ボタンを押せば、コードが表示されます。
RGB、HEX、HSLの三種類が表示されます。
この値は、フォトショップなどのグラフィックスソフトでも利用できますね。
美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」
CSSで利用する場合には、画面中央にある「CSS」ボタンをクリックすれば、コードが表示されるという具合です。
便利ですね。
美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

Random CSS Gradient Generator

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 2
  • 5

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

背景画像をサッとつくれる便利ツール20選

背景画像をサッとつくれる便利ツールやサイトをご紹介します。 背景にちょっと手を加えるだけで、見た目

記事を読む

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

これは簡単!CSSだけで棒グラフが作成できてしまう「chart.css」

これは簡単!CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」

CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」をご紹介します。 CSSファ

記事を読む

「アナと雪の女王」の配色だってわかる!人気映画のカラー/配色を参考にできる「The Colors of Motion」

「アナと雪の女王」の配色だってわかる!人気映画のカラー/配色を参考にできる「The Colors of Motion」

カラー/配色を決定するのって本当に難しいですよね。 皆さんはどんな方法で決定しているのでしょうか。

記事を読む

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料の現場で使えるBootstrap3用テンプレートをまとめました。 ラ

記事を読む

配色が苦手な人必見!違和感のある配色を良い感じのカラーパレットに直してくれる「Cohesive Colors」

配色が苦手な人必見!違和感のある配色を良い感じのカラーパレットに直してくれる「Cohesive Colors」

配色が苦手でも、まとまりのある良い感じのカラーパレットに直してくれるサービスをご紹介します。 便利

記事を読む

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ

記事を読む

2014年春夏の流行色・トレンドカラーをLenzing(レンチング)社が提示

2014年春夏の流行色(トレンドカラー)については、前回の記事「2014年春夏の流行色・トレンドカラ

記事を読む

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できて

記事を読む