• HTML
• CSS

HTML

<div class="container">
    <h2>Mensaje difuminado</h2>
    <p>La propiedad CSS de backdrop-filter le permite aplicar efectos gráficos como el desenfoque o el cambio de color al área detrás de un elemento.</p>
</div>

<div class="container">
    <h2>OJO</h2>
    <p style="text-align:center;"> Es una tecnología experimental ,comprueba la compatibilidad en navegadores antes de usarla en producción.</p>
</div>

CSS

*{
    margin:0px;
    padding:0px;  
}

body{
    background:url("http://compositu.com/template/web/img/extra/mobile_2.jpg") no-repeat;
    background-size:cover;
    width:100%;
    height:100vh;
    overflow:hidden;
    font-family:sans-serif;
}

.container{
    
    height:100px;
    min-height:130px;
    overflow-y:auto;
    background-color:rgba(255,255,255,0.2);
    
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:5px;
    width:50%;
    margin: 50px auto;
}

.container h2{
    text-align:center;
    background-color:rgba(0,0,0,0.1);
    color:rgba(255,255,255,0.8);
    padding:10px 5px;
}

.container p{
    padding:10px 7px;
    color:rgba(255,255,255,0.7);
}