コピペで使えるCSSグラデーションのジェネレーター「Blend」

コピペで使えるCSS グラデーションのジェネレーター
Blend

Blendは、コピペで使えるCSSのグラデーションジェネレーターです。

左側と右側、2色のカラーを選択します。カラーはカラピッカーから直感的に選択することも、RGBコードで入力することもできます。

グラデーションの作成

中央にある「Let’s Blend」のボタンを押すと、グラデーションが作成されます。

コピペで使えるCSS グラデーションのジェネレーター

右上にあるコントロールボタンから配色の調整ができます。

四角ボタン下のスライダーでグラデーションの方向を調整できます。丸ボタンで中央から広がるグラデーションを表示できます。「Unblend」ボタンで2色表示に切り替えることができます。

配色の調整

コードボタン</>を押すと、グラデーションのCSSコードが表示されるので、コピペで使うことができます。

グラデーションのCSS

スポンサーリンク

サンプルコード

こんな感じで使えます。

HTML

CSS

サンプル

See the Pen Blend CSS3 Gradients by Webtoolnavi (@webtoolnavi) on CodePen.0

スポンサーリンク
Blend – コピペで使えるCSSグラデーションのジェネレーター

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.10.05
  • Views 263