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で可変式ドロップダウンメニュー

    CSS

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

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

  2. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  3. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  4. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  5. Ember Burger Menu

    CSS

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

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

  6. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP