スクロールに合わせて背後のページを曲げるリキッドガラス
「リキッドガラスCSSジェネレーター」は、スクロールに応じて背後のコンテンツが歪んで見えるガラス風エフェクトを手軽に生成できるツールです。CSSのみで実現されたこのジェネレーターを使えば、動的なリキッドガラス表現を簡単にWebページに組み込むことができます。
背景メモ
- このツールは、スクロールに応じて背後にあるページコンテンツを歪ませて表示する「リキッドガラス効果」のCSSコードを、ブラウザ上で視覚的に調整しながら生成できるジェネレーターです。
- 通常のガラス効果（frosted glass / backdrop-filter: blur()）に加え、レンズを通したような屈折（ディストーション）をCSSのfilterプロパティなどで疑似的に再現しています。
- 近年のモダンCSSではbackdrop-filterが広くサポートされ、こうした視覚効果をJavaScriptライブラリに頼らず実装できるようになりましたが、歪みの表現はまだ実験的要素が強く、本ツールはその需要に応えるものです。
- フロントエンド開発者やUIデザイナー向けのオンラインジェネレーターで、調整したスタイルはコピー＆ペーストでそのまま実装できます。