マウス調整だけでセンスあるCSSグラデーショを簡単に生み出す「Blend」

デザイン

マウス調整だけでセンスあるCSSグラデーショを簡単に生み出す「Blend」

更新日時:

ボタン作成や、ちょっとした背景に「gradient」でグラデーション設定するときあってありますよね。頭のなかで描いたグラデーションを、数値に落として、表示して、修正して、表示して、、、ということをやられている方も中にはいるかもしれません。また、別のツールを使いながら細かく数値で設定している方も多いでしょう。

ちょっとしたグラデーションを付けたい時や、グラデーションの組み合わせをいろいろ確かめたい時には、その方法は少し面倒に感じますね。今回紹介する「Blend」は、一切キーボードに触れず、簡単に、そして美しいブレンドを生成して、CSSで排出してくれます。

Blend

blend

サイトリンク:「Blend

Blendのサイトを訪れると、両側にパレットが並んでいます。それぞれ選択すると、左右で別々の色が広がります。

blend

真ん中のボタンを押すことで、選択した左右の色がブレンドした結果が表示されます。

blend-expand

中央に伸びる線を左右にドラッグすることで、ブレンド位置を変更することができます。

blend-change

それでは実際にCSSを出力しましょう。CSSコードを取得するためには、<>ボタンを押します。

blend-get-css

実際のCSSコードは次のようになっています。

blend-blowser

fireFox、chromeなど複数のブラウザに対応したCSS-gradientを取得することができます。

実際に埋め込んで見ました。↓

 

数値や色の調整に一切キーボードに触れることなく、簡単に2色をブレンドさせたCSSを取得することができました。もしあなたがブレンド結果を試してみたい色がありましたら、是非「Blend」でその2色の組み合わせを試してみてください。

サイトリンク:「Blend

関連タグ

アクセスランキング

《最大6つの質問で診断完了!》
Facebook Messenger
経由で
あなたにマッチした転職を診断します。

今スグ診断(無料)

《最大6つの質問で診断完了!》
Facebook Messenger
経由で
あなたにマッチした転職を診断します。

今スグ診断(無料)