Skip to content

Instantly share code, notes, and snippets.

@Rulsky
Created March 23, 2018 11:05
Show Gist options
  • Save Rulsky/a6b04a63787f95b0f3879d040bead7fe to your computer and use it in GitHub Desktop.
Save Rulsky/a6b04a63787f95b0f3879d040bead7fe to your computer and use it in GitHub Desktop.
a mesh-like grid in css
:root {
--grid-color: rgba(100, 180, 120, .2)
}
html {
position:relative;
}
html:after {
position: absolute;
width: auto;
height: auto;
z-index: 9999;
content: '';
display: block;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
background-image: linear-gradient(var(--grid-color) 1px, transparent 1px);
background-size: 100% 16px;
}
html:before {
position: absolute;
width: auto;
height: auto;
z-index: 9999;
content: '';
display: block;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
background-image: linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: 16px 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment