フロストガラス:ライラック、ピンク、深いバイオレットに重ねたリブガラスのグラデーション
フロストガラスでは、16 枚の縦のペインがライラック、ソフトピンク、深いバイオレットのメッシュを屈折させ、色のついた光の前にリブガラスをかざしたような見た目になります。「ガラス」は 70、「柔らかさ」は 60 に設定されているので、各ペインが背後のぼかしをずらし、片方の縁に細いハイライトを拾います。「グレイン」はわずか 8 で、表面は紙よりもガラスに近い、すっきりした質感を保ちます。
自分好みに仕上げる
ペインのリズムを変える
料金カードの背後に幅広く落ち着いた板を置くなら「ペイン」は少なめにします。16 ではなく 8 を試してください。30 まで上げると細かなリブの質感になり、「カード」プレビューのような小さなサイズでも崩れません。
屈折を和らげる
「ガラス」が 70 だと色が強く曲がります。35 前後ではペインがほのかに感じられる程度になり、長いテキストの下でも安心です。「仕上がりを比較」をオンにすると、ガラスありとなしのメッシュを並べて確認できます。
よくある質問
これは CSS の backdrop-filter のような本物の背景ぼかしですか?
いいえ。ガラスの効果はグラデーション自体に描き込まれています。画像を縦のペインに分割し、それぞれが背後の色をずらします。すりガラスの見た目が完成した背景として手に入るので、実現のためにページ上の何かをリアルタイムでぼかす必要はありません。
使い方
出発点を選ぶ
ソフトメッシュ、日食の光芒、リソハーフトーンなど 28 のスタイルのいずれかから始めるか、グラデーションの種類と 24 のパレットのいずれかを選びます。
グラデーションを調整する
スケール、ゆがみ、渦巻き、柔らかさを調整し、グレイン、ガラスパネルやガラスタイル、ドット、グリッド、線のオーバーレイ、ブレンドした 2 枚目のレイヤー、ハーフトーンやピクセルソートなどの加工を追加します。アニメーションをオンにして、速度を個別に設定することもできます。
プレビューして使う
ランディングページ、カード、モバイル、新規登録のレイアウトでグラデーションを確認します。その後、無料の UX Pilot アカウントでログインすると、キャンバスで使用したりエクスポートしたりできます。