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」のご紹介でした。

カラフルなロゴのまとめインスピレーションを受けるカラフルなロゴのまとめ前のページ

Googleブログ検索がなくなったと思ったらまだちゃんとあった次のページGoogleブログ検索

関連記事

  1. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

  2. CSS

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

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

  3. Ember Burger Menu

    CSS

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

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

  4. CSS

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

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

  5. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  6. Epic Spinners

    CSS

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

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

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP