CSSグラデーションジェネレーター「Gradientoo」

CSS

直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

CSSのグラデーションを作成できる素敵なジェネレーター「Gradientoo」が凄くよかったのでご紹介します。使い方がとてもシンプルで直感的に操作できるのがいいですね。出来上がったグラデーションはCSSコードとして取得することができます。

[ads_center]

Gradientooの使い方

Gradientooの使い方

Easy CSS3 Gradient Generator – Gradientoo

ここのバーを左右に動かすことでグラデーションの大まかな色を決めることができます。

バーを動かして色を決める

グラデーション内にカーソルを持っていくと、その場所に矢印が表示されます。矢印はグラデーションの方向になっており、クリックするとグラデーションがその方向に切り替わります。方向は、上・下・右・左・右上・右下・左上・左下があります。

矢印でグラデーションの方向を決める

また、Flipにチェックを付けると現在の方向とは逆の方向にグラデーションが切り替わります。

オプション

Optionsにチェックを付けるとオプションメニューが表示されます。

オプションメニュー

グラデーションの種類(LinearやRadial)や始まりの色と終わりの色などを指定することができます。

完成したら最後はCopy CodeをクリックするとCSSコードが生成されます。

CSSコードが生成される

作成されたコードをコピペすれば、あっという間に自分の好きなグラデーションを実装することができます。

というわけで、CSSでグラデーションを作りたい時に役立つジェネレーター「Gradientoo」のご紹介でした。

関連記事

  1. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  2. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  3. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  4. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  5. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

  6. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP