Github Glow

github-glow.markdown

Github Glow

A Pen by Bhadresh Arya on CodePen.

License.

index.html

  <div class="glow"></div>
  <img class="particles" src="https://github.githubassets.com/assets/particles-de1dd20f3008.png" alt="" aria-hidden="true" loading="lazy">
<a href="https://github.com/" class="source-link">Inspiration: Github Homepage</a>

style.css

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background: #0d1117;
  overflow: hidden;
}
.glow {
  position: absolute;
  left: 35%;
  width: 60%;
  padding: 30% 0;
  transform: translate(0, -70%) rotate(-45deg);
  background: radial-gradient(
    circle at left bottom,
    #e6b7fe 20%,
    #5049c2 40%,
    rgba(58, 55, 255, 0) 50%
  );
  filter: blur(50px);
}
.particles {
  position: absolute;
  left: 40%;
  width: 40%;
  transform: translate(0, -40%);
}
.source-link {
  position: fixed;
  bottom: .25rem;
  right: .25rem;
  text-decoration: none;
  font-family: monospace;
  font-size: 12px;
}