直感的な操作でCSSグラデーションのコードが生成できるWEBサービス「CSS Gradient」

直感的な操作でCSSグラデーションのコードが生成できるWEBサービス「CSS Gradient」

直感的な操作でCSSグラデーションのコードが生成できるWEBサービス「CSS Gradient」

CSS Gradientは、CSSグラデーションのコードが生成できるWEBサービスです。直感的な操作で簡単にCSSグラデーションのコードを取得することができます。

CSS Gradientの使い方

CSS Gradientにアクセスして、グラデーションの開始色・終了色などを設定していきます。

色を変更したい箇所をクリックして、カラーパレットで色を選択するか、カラーコードを入力すると、リアルタイムでプレビューの色も変更されます。

CSS Gradientの使い方

バーの部分をクリックすれば、中継地点を追加できます。逆に、右側のカラーコードが表示されてる部分の×ボタンから中継地点を削除することもできます。

グラデーションの種類は「Linear(線形)」「Radial(円形)」から選択でき、グラデーションの角度も調整できます。[Upload Image]からは画像をアップすることができ、アップロードされた画像内の色からグラデーションが生成されます。

グラデーションの種類や角度の調整

グラデーションの設定が完了したら、表示されているCSSコードをコピペして使用します。[Copy to Clipboard]にマウスホバーした時に、ボタンの背景色が設定しているグラデーションのプレビューになるのがオツですね。

グラデーションコードのコピー

あとがき

シンプルなグラデーションなら良いですが、複雑なグラデーションだとCSSを一から書くのが面倒なので、こういったツールはありがたいですね。

以前、「Grad3」や「GradPad」というグラデーションジェネレーターも紹介していますので、よかったらチェックしてみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です