MENU

Web制作のあれこれの情報を発信提供いたします

Web制作のあれこれの情報を発信提供いたします

曇りガラス風のぼかし効果

August 5, 2025

<img decoding="async" src="http://chii-blog.ichigo20.com/wp-content/uploads/2025/08/chii-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px">

テキストの座布団を曇りガラスみたいなもので作りたいんだけど〜できる？

<img decoding="async" src="http://chii-blog.ichigo20.com/wp-content/uploads/2024/06/logo-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px">

できるよ♪やってみよう！

目次

曇りガラス風のぼかし効果

See the Pen 曇りガラス風のぼかし効果 by ちいうさ (@zqnixpal-the-looper) on CodePen.

解説

透明な白背景＋ぼかし効果で曇りガラス風のぼかし効果を表現しています。

background: rgb(255 255 255 / 0.2)で、透過度の白背景
backdrop-filter: blur(8px)でぼかしの表現
background-position: coverで背景を覆うように画像を配置
position: absoluteとinset: 0、margin: autoで画面中央に配置

<img decoding="async" src="http://chii-blog.ichigo20.com/wp-content/uploads/2025/08/chii-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px">

簡単だね♪

<img decoding="async" src="http://chii-blog.ichigo20.com/wp-content/uploads/2024/06/logo-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px">

また色々教えるね♪

よかったら仲良くしてくださいね！

URLをコピーしました！

document.addEventListener('DOMContentLoaded', function() { const copyButtons = document.querySelectorAll('.copy-button'); copyButtons.forEach(button => { button.addEventListener('click', function() { const codeContainer = this.previousElementSibling; const code = codeContainer.textContent; navigator.clipboard.writeText(code).then(() => { this.textContent = 'Copied!'; setTimeout(() => { this.textContent = 'Copy'; }, 2000); }).catch(err => { console.error('Failed to copy text: ', err); }); }); }); });