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のコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  2. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  3. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  4. CSS

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

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

  5. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

  6. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP