すりガラス風ジェネレータ｜CSS

  • 投稿日
  • 著者 kngsmym
  • カテゴリー CSS
Glass Morphism
glassgenerator.netlify.app

生成されるソース

ジェネレータで適当に設定して、吐き出したソースは以下。

<!-- This was made with GlassGenerator.netlify.app -->
<div class="glass-container" id="glass"></div>
/* This was made with GlassGenerator.netlify.app */ 

.glass-container{
    width: 700px;
    height: 375px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    backdrop-filter: blur(8px);
    background-color: rgba(255,255,255, 0.113);
    box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
    border: 0px rgba(255,255,255,0.4) solid;
    border-bottom: 0px rgba(40,40,40,0.35) solid;
    border-right: 0px rgba(40,40,40,0.35) solid;
}

テスト

吐き出されたソースは透けるブロックの箇所のみなので、背景画像を設定したブロックの中に吐き出されたHTMLを配置し、吐き出されたCSSを当てたら意図した見栄えになりました。

ソース

    <div class="glass-container-wrapper">
        <div class="glass-container" id="glass">テスト</div>
    </div>
    <style>
        .glass-container-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url(http://blog.wald-grun.biz/wp-content/uploads/2021/02/191003_03.jpg);
            background-size: cover;
            padding: 1em;
        }

        .glass-container {
            width: 20em;
            height: 10em;
            color: white;
            border-radius: 10px;
            backdrop-filter: blur(3px);
            background-color: rgba(255, 255, 255, 0.113);
            box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
            border: 0px rgba(255, 255, 255, 0.4) solid;
            border-bottom: 0px rgba(40, 40, 40, 0.35) solid;
            border-right: 0px rgba(40, 40, 40, 0.35) solid;
            padding: 1em;
        }
    </style>

見た目

テスト