G®adie.

CSS bg gradient generator. グラデーションシミュレーター「Gradie - グラディ」
Designed and Developed by HIGASHIYUKI®

SCROLL DOWN

コントロールパネルの直感操作で美しく鮮やかなCSSグラデーションコードを生成。

コントロールパネルのスライダーを直感的に操作するだけで、美しい背景グラデーションとそのCSSコードをクイックに生成できるジェネレーターツール。

スライダーを動かしながらリアルタイムで変化していく背景のグラデーションカラーと大きなロゴ・タイポグラフィがインスピレーションを与えるきっかけになることでしょう。

正確な色を求めるデザイナー、アーティスト、ウェブ開発者に最適なウェブアプリケーションです。

また、色からインスピレーションを得たい方や、純粋に色で遊びたい方にもおすすめです。

 

ベースカラー設定によるグラデーションの自動出力と、6つのスライダー操作で無限の色を創ります。

コントロールパネルの「BaseColor:HEXコード」に入力された値を基本カラーとして、6つのスライダーでパラメーターを調整してグラデーションを生成します。*BaseColorの値はスライダー操作に合わせて随時可変します。

各スライダー、「Hue:色調」「Saturation:彩度」「Brightness:明度」「Hue Shift:色相」「L/R Ratio:左右の色割合」「Vibrance:(左右の)自然な彩度」を直感的に操作することで、ブラウザ上でウィンドウ一杯に広がる鮮やかなグラデーションカラーをリアルタイムプレビューできます。

また、「Typograph」トグルボタンを操作することで、画面中央のG®adie.ロゴをON/OFFできます。

G®adie. CSS bg gradient generator - システム要件

推奨通信環境
(新旧)固定回線でも移動通信でも可 G®adie.は本体データ全496KB(実働データ401KB)と超軽量です。また、サーバーキャッシュ/ブラウザキャッシュも有効ですので、様々な規格のインターネット回線やスマートフォンなどの移動通信回線(5G/LTEなど)でご利用できます。
対応端末
Win, Mac OS搭載のコンピューター、Android OS, Apple iOS搭載のタブレット・スマートフォン G®adie.のUX/UIはデスクトップ・ラップトップでのご利用を想定したものです。モバイルデバイスでもご利用可能ですが、本来のユーザー体験が得られない場合があります。
対応ブラウザ
Chrome / Firefox / Edge / Opera / SafariCSS3 linear-gradient 関数のレンダリングができない古いブラウザが搭載されたコンピューターではご利用いただけません。可能な限り最新バージョンのブラウザをご利用ください。

G®adie.はアカウント登録など不要でどなたでも無料でご利用いただけます。

G®adie.の機能の一つであるBase Color ( HEX ) の設定によるカラー変更の際、正しいHEXカラーコードが入力されていな場合はエラーとなり、スライダーを動かしてもシステムが作動しません。

G®adie.をご使用の際は、極度に激しいスライダーの操作などで急激な画面カラーの変化を何度も行うことは目に大きな負担がかかり、光過敏性発作を引き起こす可能性があります。明るい室内でゆっくりと操作をして適切な使用法をお守りください。

G®adie.のご利用に際し、当方の定める利用規約*の一部が適用されます。

G®adie.を使ってみましょう。

コントロールパネルのスライダーを直感的に操作するだけで美しいグラデーションが生成できる、無料のウェブアプリケーション「グラディ」。コーダー/プログラマーさんのみならず、色からインスピレーションを得たいとお考えのグラフィック/エディトリアルデザイナーの方や、純粋に色彩や操作感を楽しむホビーツールとしてたくさんの方にご利用いただけると嬉しいです。