Skip to content

Instantly share code, notes, and snippets.

@antonio-masotti

antonio-masotti/bootstrap-glassmorphism-card.markdown

Created April 15, 2022 19:45
Show Gist options
  • Save antonio-masotti/3d5eb6e7a8710d647a18274c740ff1c4 to your computer and use it in GitHub Desktop.
Save antonio-masotti/3d5eb6e7a8710d647a18274c740ff1c4 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap glassmorphism card
Raw
index.html
<body>
<div class="container d-flex">
<div class="card
d-flex
p-5 mt-5 mx-auto
glasscard">
<h2 class="text-center">Glassy Card</h2>
<p class="text-justify lh-lg">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam pariatur error provident sunt adipisci magni soluta quidem odio vitae ab placeat cumque consectetur sed officiis ad nisi, fugiat quis quisquam.
</p>
</div>
</div>
</body>
Raw
style.css
* {
font-size: 18px;
font-family: 'Poppins', sans-serif;
box-sizing: inherit;
}
body {
background: url("https://images.unsplash.com/photo-1531315630201-bb15abeb1653?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80") center no-repeat fixed;
min-height: 100vh;
}
p {
text-align: justify;
font-size: 1em;
}
h2 {
font-weight: bolder;
font-size: 2rem;
}
.glasscard {
color: black;
justify-content: space-between;
background-color: rgba(255 255 255 / 50%);
border-radius: 20px;
border: 1px solid rgba(255 255 255);
box-shadow: 0 0 15px 3px rgb(14 113 229 / 50%);
backdrop-filter: blur(3.5px);
max-width: 600px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment