こんにちは、だいちゃんです。

グラデーションがかかったテキストのCSSをプレビューを見ながら生成することができる GRAGEN -グラジェン- をリリースしました！

GRAGEN

GRAGEN

GRAGEN は、無駄に広いプレビュー領域がチャームポイントな、グラデーション付きテキストのCSSを生成することができるツールです。

即時に反映されるプレビューを見ながらグラデーションの色や角度を変更して、Webページに合ったグラデーションを決めることができます。

さらに、プレビュー用のテキストや、背景色も変更することができるので、よりページに近い状態で確認できます。

変更できるパラメーター

• 背景色
• テキストの内容（複数行入力できます）
• テキストのフォントサイズ
• テキストのウェイト（普通・太め から選択できます）
• グラデーションの角度
• グラデーションの色

さらにさらに、グラデーションの色は自由に無限に増減可能な上、カラーピッカーから視覚的に選ぶ or カラーコードで直接指定することもできます！

制作の背景

最近Webツールを作る楽しさに目覚めてきて、RECITONE や SURL などいくつかのWebツールを公開しています。

ただ、共通してデザインが最弱で、特にページのタイトルがタイトルらしからぬ風格の無さになっていて、安っぽく見えてしまうのが悩みでした。

そこで、CSSでタイトルにグラデーションをつけようと試したのですが、開発者ツールから色を変えたりするのも結構めんどくさかったので、簡単にプレビューしながら色を選べるツールを作ってやろうと思って作ってやりました。

作ってみたのはいいものの、ツールを作ったことに満足して、既存のツールの改修がめんどくさくなってるのが今の悩みです。

今後の展望

今後は、Google Fontの日本語フォントをいくつか読み込んでおいて、フォントも切り替えながらプレビューできるよう、とか、グラデーションの色の部分を並び替えできたりしたら、もう少し便利になるかなと思ってます。

今回作ったヘッダーはほかのツールでも共通して使っていきたいので、その横展開も進めたい。

そして何より、このツールのタイトルすらグラデーション使ってないのどうにかしたいw

忙しい平日の時間を割いて3日くらいでやっつけで作った割にはちゃんと動いてくれて嬉しい反面、コードが相変わらず汚いのでどうにかしたい...