磨りガラスのSVGフィルタージェネレーター
背景を物理的に加工し、磨りガラス（曇りガラス）のような質感にするSVGフィルターで表現します。
プレビュー
<!-- 磨りガラスのSVGフィルター -->
<svg xmlns='http://www.w3.org/2000/svg'>
<filter id="glass-filter" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="0 {{blur_val}}" in="SourceGraphic" edgeMode="none" result="blur1" />
<feGaussianBlur stdDeviation="{{blur_val}} 0" in="SourceGraphic" edgeMode="none" result="blur2" />
<feBlend mode="lighten" in="blur1" in2="blur2" result="blend" />
<feMerge result="merge">
<feMergeNode in="blend" />
<feMergeNode in="blend" />
</feMerge>
</filter>
</svg>
<!-- 適用対象 -->
<div class="glass-panel"></div>.glass-panel {
position: absolute;
top: 55%;
left: 50%;
width: 150px;
height: 150px;
border-radius: {{radius}};
transform: translate(-50%, -50%) rotate(45deg);
backdrop-filter: url(#glass-filter) brightness(1.1);
animation: {{animation_prop}};
box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.glass-panel:hover {
animation: {{hover_animation}};
}
@keyframes rotate {
to {
transform: translate(-50%, -50%) rotate(405deg);
}
}機能、使い方
- 方向性のあるSVGぼかし:
feGaussianBlurを水平・垂直方向で個別に適用し、feBlend(lighten) で合成することで、標準的なぼかしよりも異方性のある高品質な磨りガラス効果を演出します。 - backdrop-filter の活用:要素自体の
filterではなくbackdrop-filterを使用することで、背景要素を動的にぼかし、透過パネルとしてのリアリティを高めています。 - アニメーション対応:回転アニメーションなどを組み合わせることで、ガラスの質感が動的に変化するモダンなUI要素としてそのまま利用可能です。
プロパティの説明
backdrop-filter: url() を利用して、背景に対してカスタムのSVGフィルタを適用しています。フィルタ内の feBlend
は、異なる方向のぼかしを合成して深みを出しています。
brightness(1.1) は背景をわずかに明るくし、磨りガラス越しの光の拡散をよりリアルに表現するために追加されています。
primitiveUnits="userSpaceOnUse" の指定により、ぼかしの値（stdDeviation）が要素のサイズに関わらずピクセル単位で制御されるため、安定したデザインが可能です。
