Responsive Glassmorphism CSS Cards

byCodingFlicks -March 07, 2024

0

CSS cards are UI elements used on websites to organize their content. It helps developers organize a website's content into visually appealing containers. Content such as articles, products, or user profiles can be displayed using cards. In this blog post, we will create three responsive cards with glassmorphism effects. The video tutorial below will show you the coding process of this project. If you like our content, you can subscribe to our YouTube channel.

Video Tutorial:

We hope you have watched the 'How to Create Responsive Cards in HTML CSS' video tutorial. We can arrange these cards in grids or stacks and make them responsive for different screen sizes. Hence, these cards can adapt to different screen sizes and resolutions. There are several cards in web design. Blog Post Card, Product Card, Image Gallery Card, Profile Card, Testimonial Card, Event Card, Recipe Card, Portfolio Card, Social Media Card, Video Card, Music Playlist Card, Newsfeed Card, Contact Card, Weather Forecast Card, FAQ Card, Cards such as job listing cards, quote cards, shopping cart cards, etc. have versatility in web design. You can use any of these cards to make your website organized and visually appealing.

To adapt to different screen sizes and resolutions, we've made this project responsive using the CSS display grid feature. We also applied a design trend called Glassmorphism to each card. Glassmorphism Elements can also be characterized by frosted glass-like elements. In this technique, developers create semi-transparent UI elements that mimic the look of frosted glass. This gives each element a sense of depth and dimensionality. This new trend in web design can enhance the overall aesthetics of a website and create a memorable user experience.

You May Also Like:

Responsive Glassmorphism CSS Card in HTML CSS [Source Code]:

To create this snippet, you need to create an HTML and a CSS file. Copy the code from the code box below and paste it into your file. Save the code and test it in your browser. If there is any problem you can download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create Responsive Cards in HTML CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
		<div class="box-area">
			<div class="box">
				<div class="img-box"><img alt="" src="a1.jpg"></div>
				<h2>John Doe</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti architecto iste quos numquam, laboriosam eveniet?</p>
				<p class="socials">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-linkedin"></i>
          <i class="fa fa-pinterest"></i>
        </p>
			</div>
			<div class="box">
				<div class="img-box"><img alt="" src="a2.jpg"></div>
				<h2>Dave Wood</h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti architecto iste quos numquam, laboriosam eveniet?</p>
				<p class="socials">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-linkedin"></i>
          <i class="fa fa-pinterest"></i>
        </p>
			</div>
			<div class="box">
				<div class="img-box"><img alt="" src="a3.jpg"></div>
				<h2>Joe Miller </h2>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti architecto iste quos numquam, laboriosam eveniet?</p>
				<p class="socials">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-linkedin"></i>
          <i class="fa fa-pinterest"></i>
        </p>
			</div>
		</div>
	</div>
</body>
</html>

ADD CSS:

body{
  display: grid;
  place-items: center;
  min-height: 95vh;
    background-image: url(1.jpg);
    background-size: cover;
    background-position: center center;
  }
  .wrapper .box-area{
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    text-align: center;
    color: #fff;  
  }
  .box-area .box {
    height: 400px;
    background-color: rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    margin: 40px;
    flex: 0 1 300px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
    border-radius: 20px;
  }
  .img-box {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 8% auto;
    box-shadow: 0 2px 15px rgba(0,0,0,0.5);
  }
  .img-box img{
    width: 100%;
  }
  .box h2 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 40px;
    margin: 0;
  }
  .socials {
    margin-top: 30px;
  }
  .socials i {
    margin: 0 15px;
  }

We hope the code works for you. If you want to get more source code then you can visit our homepage and click on the Load More button. Thanks for Visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.