グラデーションに便利！国産CSS3ジェネレータ「Grad3」

グラデーションの色は自由に追加できて直感的に操作できます。色を減らすのにちょっと悩みましたが、消したいポイントを左へドラッグすると消えます。

円形グラデーションも作ることができます。こちらも直感的な簡単操作です。

もちろんリアルタイムでプレビューされます。

深く考えなくてもサンプルがたくさんあるので、サンプルからいじっていくのもいいですね。

いい感じの実用的なサンプルが色ごとで分けられています。

通常は背景のグラデーション部分のみのコードが表示されていますが、「All」にすることですべてのコードが表示されます。

ベンダープレフィックスもブラウザごとで付けることができます。ただしベンダープレフィックスが付くのはbackgroundのみのようです。

テキストシャドウやボックスシャドウは手入力なので、ある程度知識が必要です。

• 1. フォントカラー（color）
• 2. フォントの太さ（font-weight）
• 3. テキストシャドウ（text-shadow）
• 4. フォントサイズ（font-size）
• 5. ボーダー（border）
• 6. ボックスシャドウ（box-shadow）
• 7. 角丸（border-radius）

テキストの左にワンポイントのアイコンを入れることもできます。

このアイコンも次の背景も直リンクですがサーバー大丈夫なのでしょうか？

背景にボーダーやドットの画像を入れることもできます。

できあがったコードに適当なクラスやID名を付けて表示すれば完了です。

こんな感じでしょうか。

ということで簡単に解説してみました。

この手のジェネレータで国産は非常に珍しいです。すごい使いやすいですし、ぜひこれからもがんばってほしいです。

自分もこういうのを作る側になりたいです。