Can I achieve a glass morphism effect on my page without moving the background of the body? I only want to move the .container. Is this feasible? I attempted using background-attachment: fixed, but it did not work for me.
Here is the code snippet I have been working with:
body {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
background: #091921;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background: linear-gradient(#e91e63, #ffc107);
clip-path: circle(22% at 30% 20%);
z-index: -1;
}
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background: linear-gradient(#ffffff, #da00ff);
clip-path: circle(20% at 70% 90%);
z-index: -1;
}
.container {
margin: 50px 0;
width: 60%;
padding: 20px 40px;
background-color: rgba(255, 355, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
font-size: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Lorem ipsum dolor sit.</h1>
<p>In etiam scriptum est, cum Domiti multum ingenio ne poltnnuim osre ut unsi omel
suscitarit solipsurium pa coptiso traieciset olerynis magnam quouvr laovrbus arcepur ium homo
armatus domo veltioume ipsunsus gob apture frunquvunt sensor nitro tristrargi sois est languagd cornosin cakrensis pharequarem cxn asatcat/adbem singepes. Altiampe mul hanc ac vet, naceint am matometuptap parmisra. Lalauta, larqueacar met ont portatut garuilique procrani taicer inde pilia manposatar valenti acum its li refusecktutes postma rons duqual beatis firimit pagae finance debial endorbar tifonisi pulendam pussenca, egminisma donrement eliquin menstrustroriu.Setembrarus vadentarcas com terrissiverantet quibril integrit tem hoctore consfier in juni anhc fiscusom peu irri leturnot duitivor di senirivenno qua adtuam plont opelabior mus egresscit ductum antostil concalusest glads qutionscoact aluebtor malicales istia comm.
</p>
</div>
</body>
</html>