Glass Background

Glass Effect

HTML

<div class="glass">
  <h1>Glass Effect</h1>
</div>

CSS

.glass {
  display: flex;

  align-items: center;
  justify-content: center;

  height: 200px;
  width: 100%;

  background:linear-gradient(
    135deg,
    rgba(255,255,255,0.1),
    rgba(255,255,255,0)
  );

  /* If u want platic instead of glass change blur 0px to 10px */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
}