Card Design, Sections

Glassmorphism in Html and CSS design

Hello everyone, in this post, we will learn how to claymorphism and glassmorphism design in HTML, CSS, and javascript. It has a unique design and it looks like a transparent color but actually not transparent. In the last post, we have created a Simple Landing page Html template free download.

Glassmorphism design in HTML:

This effect can be used for different things and different parts of the website. So, we have created a card design and it is made in claymorphism and glassmorphism design.

So, you can see in the image we have a unique design for the card. It has a small box on the left top side and it has a text option. You can add any type of text in this box according to your requirements. Below this, we have an option of image and it is related to the business or businessman or company. Then it has a text option in the bold heading.

So, the card has a round rectangular shape and the shape is round due to the CSS radius property. The background of the card has a solid color and you can replace it with another color or image. Let us see how to create this type of effect using Html, CSS, and javascript.

How to create glassmorphism in HTML?

We will create this type of effect in three steps. You need to follow these steps if you want to create this type of design for free.

Download a code editor for glassmorphism in HTML:

It will help you to write the code easily. Code editors have a lot of advantages that’s why you have to download a code editor for writing the code.

Source code of HTML:

It is known as a markup language and in this design, we have added the shape, text, and image using Html/. Skeleton is created with the help of HTML. The Html code for this design is given below and you have to use it. Create an Html file with a .html extension and then paste this HTML code into your file.

<!DOCTYPE html>
<html>
<head>
	<title>Glassmorphism in Html and CSS design - fantacydesigns</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
  <p><span></span>design<br>trends<br><i>2022</i></p>
  <div>
  </div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Glassmorphism in Html and CSS design - fantacydesigns</title>

</head>

<body>

<div>

<p><span></span>design<br>trends<br><i>2022</i></p>

<div>

</div>

</body>

</html>

Source code of CSS:

It is a markup language and we use it to design our cards. Claymorphism and glassmorphism effect is created for this card using CSS properties. This effect is designed using CSS. Therefore, CSS helps us to design our website and we have designed our card using CSS.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  font-family: "Poppins", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 12pt;
  font-weight: 400;
  color: black;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: MediumOrchid;
  margin: 0;
  padding: 0;
}

div {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  min-width: 400px;
  min-height: 250px;
  max-width: 400px;
  max-height: 250px;
  background: linear-gradient(
    35deg,
    white 0%,
    white 84.7%,
    MediumOrchid 85%,
    MediumOrchid 91%,
    white 91.3%
  );
  box-shadow: 0 10px 60px 0 DarkViolet, inset 0px -10px 17px 2px MediumOrchid;
  border-radius: 25px;
  z-index: -1;
}

div::before {
  position: absolute;
  backdrop-filter: blur(5px);
  bottom: -20px;
  right: -20px;
  width: 70px;
  height: 70px;
  content: "";
  border-radius: 200px;
  background: #ffffff66;
  box-shadow: 0 10px 25px 0 DarkViolet, inset 0px -8px 15px 0px Purple;
  border: 0.1px solid transparent;
}

div > p {
  position: relative;
  right: 5px;
  font-size: 34pt;
  font-weight: 900;
  margin: 0;
  padding: 20px 35px 10px 25px;
  line-height: 36pt;
  text-align: center;
  color: #3d0d49;
  align-self: center;
  order: 2;
}

div > p > span {
  position: absolute;
  bottom: 4px;
  left: 45px;
  width: 55%;
  height: 20px;
  background: MediumOrchid;
  content: "";
  z-index: -1;
}

div > p > i {
  color: white;
  text-shadow: 1px 1px 0px MediumOrchid, 2px 2px 0px MediumOrchid,
    3px 3px 0px MediumOrchid, -1px -1px 0px MediumOrchid;
}

div::after {
  backdrop-filter: blur(5px);
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-left: 20px;
  padding-bottom: 28px;
  top: -35px;
  left: -23px;
  width: 50%;
  height: 50%;
  background: #ffffff55;
  content: "Claymorphism + Glassmorphism";
  text-align: center;
  color: #3e0d4a;
  line-height: 16pt;
  font-weight: 700;
  border-radius: 15px;
  box-shadow: 0 5px 30px 0 MediumOrchid, inset 0px -10px 20px 0px #ba55d3bb;
  border: 0.1px solid transparent;
}

div > div {
  all: unset;
  position: relative;
  width: 150px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 35px 0px 40px 30px;
  border-radius: 15px;

  background-size: cover;
  background-position: center;
  border: 0.1px solid MediumOrchid;
  z-index: -1;
}

div > div::before {
  all: unset;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: MediumOrchid;
  mix-blend-mode: color;
  border-radius: 15px;
}

div > div::after {
  all: unset;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

*::before,

*::after {

box-sizing: border-box;

}

body,

html {

font-family: "Poppins", sans-serif;

-webkit-text-size-adjust: 100%;

-webkit-tap-highlight-color: transparent;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

font-size: 12pt;

font-weight: 400;

color: black;

}

body {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

background: MediumOrchid;

margin: 0;

padding: 0;

}

div {

position: relative;

display: flex;

flex-direction: row;

align-items: flex-end;

justify-content: center;

min-width: 400px;

min-height: 250px;

max-width: 400px;

max-height: 250px;

background: linear-gradient(

35deg,

white 0%,

white 84.7%,

MediumOrchid 85%,

MediumOrchid 91%,

white 91.3%

);

box-shadow: 0 10px 60px 0 DarkViolet, inset 0px -10px 17px 2px MediumOrchid;

border-radius: 25px;

z-index: -1;

}

div::before {

position: absolute;

backdrop-filter: blur(5px);

bottom: -20px;

right: -20px;

width: 70px;

height: 70px;

content: "";

border-radius: 200px;

background: #ffffff66;

box-shadow: 0 10px 25px 0 DarkViolet, inset 0px -8px 15px 0px Purple;

border: 0.1px solid transparent;

}

div > p {

position: relative;

right: 5px;

font-size: 34pt;

font-weight: 900;

margin: 0;

padding: 20px 35px 10px 25px;

line-height: 36pt;

text-align: center;

color: #3d0d49;

align-self: center;

order: 2;

}

div > p > span {

position: absolute;

bottom: 4px;

left: 45px;

width: 55%;

height: 20px;

background: MediumOrchid;

content: "";

z-index: -1;

}

div > p > i {

color: white;

text-shadow: 1px 1px 0px MediumOrchid, 2px 2px 0px MediumOrchid,

3px 3px 0px MediumOrchid, -1px -1px 0px MediumOrchid;

}

div::after {

backdrop-filter: blur(5px);

position: absolute;

display: flex;

flex-direction: column;

align-items: flex-end;

justify-content: flex-end;

padding-left: 20px;

padding-bottom: 28px;

top: -35px;

left: -23px;

width: 50%;

height: 50%;

background: #ffffff55;

content: "Claymorphism + Glassmorphism";

text-align: center;

color: #3e0d4a;

line-height: 16pt;

font-weight: 700;

border-radius: 15px;

box-shadow: 0 5px 30px 0 MediumOrchid, inset 0px -10px 20px 0px #ba55d3bb;

border: 0.1px solid transparent;

}

div > div {

all: unset;

position: relative;

width: 150px;

height: 100px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

margin: 35px 0px 40px 30px;

border-radius: 15px;

background-size: cover;

background-position: center;

border: 0.1px solid MediumOrchid;

z-index: -1;

}

div > div::before {

all: unset;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

content: "";

background: MediumOrchid;

mix-blend-mode: color;

border-radius: 15px;

}

div > div::after {

all: unset;

}

Create a CSS file with a .css extension and then paste this code of CSS for card design. Then link both the files with each other.

Download source code:

Sometimes it is difficult for some people to connect both the files with each other and create the project completed without any error. For those, we have created a file and in this file, we have image and code files. Download this file from the below download source code button and your card design will be there.

Task:

The concept of glassmorphism is unique and beautiful. It gives a new touch to the design and makes it awesome. Create any section or design with the help of Html and CSS. Then apply glassmorphism effect to that design. The design or section be any card or form etc.

I hope you like this post. If you find it interested then share it. IF you have any type of query then feel free to ask in the comment section.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download