I have no talent at all. I am only passionate about understanding

Article

How to Create the HTML CSS Frosted Glass Effect

How to Create the HTML CSS Frosted Glass Effect


January, 18 2021

In article we will go into how to create frosted glass effect and real examples frosted glass effect built with HTML, CSS, Javascript for web design and development!

How to Create the HTML CSS Frosted Glass Effect

In this section we will go into creating the basic HTML structures for the glass effect effect using the code later:

HTML

 <main>
  <blockquote>
    I have no talent at all. I am only passionate about understanding
    <footer>—
      <cite>
        Albert Einstein
      </cite>
    </footer>
  </blockquote>
</main>

Next we will go into setting the CSS style to create frosted glass effect using the code below:

CSS

body, main::before {
   background:url("https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/glass-effect-html-css/pexels-valiphotos-589841%20%281%29.jpg") 0 / cover fixed;
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
}
main {
  width: 20rem;
  height: 15rem;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  border-radius: 5px;
  position: relative;
  z-index: 1;
  background: inherit;
  overflow: hidden;
  font-size: 24px;
  font-weight: bold;
  line-height: 42px;
}
main::before {
  content: "";
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  filter: blur(10px);
  margin: -20px;
}

Here is a picture of this effect!

Frosted Glass Effect HTML CSS

And the final result you see below:

See the Pen Glass Effect by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link Project

Other Frosted Glass Effect For Website

Before going into the example, I have some notes below to see the results better than you move on screen mode 0.5x, 0.25x or if it does not show up remember verify yourself as human Can you see it in Codepen? If the file is SCSS, you can convert to CSS here: SCSS to CSS . If we want to see the sources used in Codepen do you set Click on the word Resources at the bottom left of Codepen to see the links CDN guide.

CSS Frosted Glass Effect

CSS Frosted Glass Effect

And below is the project on Codepen.

See the Pen CSS only frosted glass effect by Gregg OD (@GreggOD) on CodePen.

Link Project

Thiết Kế Frosted Glass Card HTML CSS

Frosted Glass Card HTML CSS

And below is the project on Codepen.

See the Pen Frosted glass card overlay by Trevor Eyre (@trevoreyre) on CodePen.

Link Project

Frosted Glass Effect Với SVG

Frosted Glass Effect Với SVG

And below is the project on Codepen.

See the Pen Frosted glass effect with CSS & SVG by Matori (@Matori) on CodePen.

Link Project

Login Form Frosted Glass Effect

Login Form Frosted Glass Effect

And below is the project on Codepen.

See the Pen Frosted Glass Effect - Form by Usama Tahir (@AmJustSam) on CodePen.

Link Project

CSS3 Glass Effect

CSS3 Glass Effect

And below is the project on Codepen.

See the Pen CSS Glass Effect by Yariv Fruend (@YarivFrd) on CodePen.

Link Project

Glass Effect

Glass Effect

And below is the project on Codepen.

See the Pen CSS Glass Reflection Effect by Dovydas (@dovydas) on CodePen.

Link Project

UI Frosted Glass Effect

UI Frosted Glass Effect

And below is the project on Codepen.

See the Pen Frosted Glass Effect Using Multiple Images by betravis (@betravis) on CodePen.

Link Project

Table Frosted Glass Effect

Table Frosted Glass Effect

And below is the project on Codepen.

See the Pen Exercise - Coffee Shop Menu App by Zach Saffrin (@zachsaffrin) on CodePen.

Link Project

Frosted Glass Effect HTML5 CSS3

Frosted Glass Effect HTML5 CSS3

And below is the project on Codepen.

See the Pen Frosted glass effect by Michèle van den Aardweg (@michelenl) on CodePen.

Link Project

CSS Frosted Glass Creditcard

CSS Frosted Glass Creditcard

And below is the project on Codepen.

See the Pen CSS Frosted glass creditcard by Chris Bongers (@rebelchris) on CodePen.

Link Project

Frosted Glass Quote

Frosted Glass Quote

And below is the project on Codepen.

See the Pen Frosted Glass Quote by Joni Trythall (@jonitrythall) on CodePen.

Link Project

CSS Frosted Glass Responsive

CSS Frosted Glass Responsive

And below is the project on Codepen.

See the Pen CSS - Frosted Glass by Kyle Wetton (@kylewetton) on CodePen.

Link Project

Summary:

Through here I hope the article will provide you more examples frosted glass effect for playback Development, web design and if you have any questions, please email me as soon as possible. We wish you to continue keep supporting the website so I can write more good articles. Have a nice day!