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. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

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

    CSS

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

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

  3. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  4. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  5. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  6. CSS

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP