Skip to content

Instantly share code, notes, and snippets.

@BrianPurgert

BrianPurgert/SynthwaveGrid.css

Last active August 3, 2019 15:12
Show Gist options
  • Save BrianPurgert/45b6f4ee6d0101dee28e19c16eac2349 to your computer and use it in GitHub Desktop.
Save BrianPurgert/45b6f4ee6d0101dee28e19c16eac2349 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SynthwaveGrid.css
.monaco-editor::before {
--grid-color:rgba(115,59,139,0.1);
--grid-size:60px;
--grid-blur:0px;
content: '';
bottom: 0%;
left:0;
position:fixed;
overflow: visible;
margin-left: -50%;
width: 200%;
height: 100%;
background-position-y: 0px;
background-image:
repeating-linear-gradient( 90deg,var(--grid-color) 0%, transparent calc(1px + var(--grid-blur)), transparent var(--grid-size),var(--grid-color) calc(var(--grid-size) + 1px + var(--grid-blur)) ),
repeating-linear-gradient( 180deg,var(--grid-color) 0%,transparent calc(1px + var(--grid-blur)), transparent var(--grid-size),var(--grid-color) calc(var(--grid-size) + 1px + var(--grid-blur)) );
transform:perspective( 50vh ) rotateX(70deg) translateZ(10px);
animation:moving-grid 0.5s infinite linear;
}
@keyframes moving-grid{
0%{
transform:perspective(50vh) rotateX(70deg) translateZ(10px) translateY(-var(--grid-size));
}
100%{
transform:perspective(50vh) rotateX(70deg) translateZ(10px) translateY(var(--grid-size));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment