Fluent design's Acrylic in Html

Fluent design's Acrylic in HTML using gradient as a background instead of a picture. HTML + CSS (No JS)

by Vijay Koushik

HTML

<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<script src="https://fonts.googleapis.com/css?family=Lato:300"></script>
<div class="container">
  <div class="content">
    <div class="header">
      <span class="close">&times;</span>
      <h2>
        Pellentesque id
      </h2>
    </div>
    <div class="body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices lobortis nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque placerat felis quis mollis vehicula. Nunc egestas leo leo,
        et mollis neque consequat in. Maecenas enim sapien, congue quis iaculis eu, feugiat eget metus. Nunc sit amet euismod dui, sit amet faucibus neque.</p>
      <p>
        Curabitur ac hendrerit quam. Phasellus sed mattis libero. Curabitur at placerat mi, non sagittis urna. Proin fermentum bibendum placerat. Nam id facilisis nunc. Vestibulum tortor risus, interdum eget nisl at, aliquam lacinia erat. Etiam tincidunt tellus
        in sagittis ultrices. Sed vel varius nisl.
      </p>
    </div>
    <div class="footer">
      <h3>Phasellus elementum</h3>
    </div>
    <div class="blur">
    </div>
    <div class="noise">

    </div>
  </div>
  <div class="content" style="top: -260px;left: 28px;z-index: 5;">
    <div class="header">
      <span class="close">&times;</span>
      <h2>
        Browser Support
      </h2>
    </div>
    <div class="body">
      <h3>
        Desktop
      </h3>
      <p>Firefox: Yes, Chrome: Yes, Internet Explorer: No, Edge: Yes, Opera:Yes, Safari: Yes</p>
      <h3>
        Mobile
      </h3>
      <p>Firefox: Yes, Chrome: Yes, Internet Explorer: No, Edge: Yes, Opera:Yes, Safari: Yes</p>
    </div>
    <div class="footer">
      <p>
        Note: mini browsers like Opera Mini, UC Mini.. are not supported.
      </p>
    </div>
    <div class="blur blur-z1">

    </div>
    <div class="noise">

    </div>
  </div>
</div>

CSS

.container {
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  font-family: 'Lato', sans-serif;
  background: linear-gradient(to bottom right, #FF9933, #FFFFFF, #138808);
}

.content {
  position: relative;
  background: rgba(247, 247, 247, 0.6);
  margin: auto;
  padding: 0;
  border: 1px solid #000080;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
}

.header,
.body,
.footer {
  position: inherit;
  padding: 2px 16px;
  z-index: 2;
}

.close {
  float: right;
  font-size: 24px;
  font-weight: bold;
}

.blur {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom right, #FF9933, #FFFFFF, #138808) center/cover;
  background-repeat: repeat;
  background-attachment: fixed;
  filter: blur(26px);
  z-index: 0;
}

.blur-z1 {
  filter: blur(32px);
}

.noise {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:...

JavaScript

[{
  000214 A0 - 0000 - 0000 - C000 - 000000000046
}]
Prop3 = 19, 11[InternetShortcut]
IDList =
  URL = https: //jsfiddle.net/svijaykoushik/qoyj058m/40/#update