Css Glassmorphism Design & Animation

                    <div class="container">
                        <div class="box">
                            <div class="textBox">
                            Design Black Shaded <b>Glassmorphism</b> Box And Text <i>Design Animation</i> in HTML CSS
                            </div>
                        </div>
                    </div>

                    <style>
                    @import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');

                    body {
                        font-family: 'Lexend Deca', sans-serif !important;
                        background: rgb(12, 83, 169);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100vh;
                        margin: 0;
                    }

                    .container {
                        position: relative;
                        overflow: hidden;
                        width: 100%;
                        height: 200px;
                        max-width: 500px;
                    }

                    .box {
                        position: absolute;
                        display: flex;
                        left: -100%;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        background: rgba(12, 83, 169, 1);
                        box-shadow: inset 0px 0px 50px rgba(255, 255, 255, 0.5),
                                    inset 0px 0px 10px rgba(255, 255, 255, 0.4),
                                    0px 5px 30px rgba(12, 83, 169, 0.3);
                        border-radius: 20px;
                        animation: slideBox 1s forwards;
                        animation-delay: 0.9s;
                    }

                    .textBox {
                        padding: 20px;
                        text-align: center;
                        justify-content: center;
                        align-items: center;
                        color: white;
                        font-size: 21px;
                        text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
                        animation: slideText 1s forwards;
                        animation-delay: 1s;
                        opacity: 0;
                        transform: translateX(-100%);
                        overflow-y: scroll;
                        /* come from left */
                    }

                    .textBox::-webkit-scrollbar {
                        width: 0px;
                        background: transparent;
                    }

                    @keyframes slideBox {
                    to {
                        left: 0%;
                    }
                    }

                    @keyframes slideText {
                    to {
                        transform: translateX(0);
                        opacity: 1;
                    }
                    }
                    </style>
                    </body>
                    </html>
                

Download Code