グラスモーフィズムコード生成
TailwindCSS で記述されたグラスモーフィズムのサンプルコードを生成できます。
グラス
枠線
Glassmorphism は、2020年末に人気が出始めた新しい UI デザインのトレンドです。その主な特徴は、透明性とぼかしを使用して背景を分離することです。「ガラス越し」の見た目を作り出します。Glassmorphism が使用される主な理由は、インターフェースの視覚的な階層と深度を際立たせることです。
Glassmorphism is a new UI design trend, which started growing in popularity in the end of 2020. Its main characteristic is the background separation it achieves by using transparencies and blurs. This way the effect resembles a frosted glass. It creates “through the glass” look and feel on the elements. The main reason why glassmorphism is being used is to establish a visual hierarchy and depth of the interface.
ref. https://www.eyasdesign.com/glassmorphism-what-you-need-to-know
<div class="" />
使い方
2020年 ごろから注目されているグラスモーフィズムを TailwindCSS で記述するコードをシミュレートするツールです。
グラスの影は背景色が暗いため白で固定しています。そのため、明るい背景色では黒影での調整をお勧めします。
詳しいグラスモーフィズムについては、次の記事を参照してください 👍