TEXTURE / 3%
Back to library
INTERACTION_023
Tech Grid.
Two repeating linear gradients form a 56px grid; a mask fades it toward the edges so the structure is implied rather than stated.
- CATEGORY
- Background
- COMPLEXITY
- Easy
- TECH
- CSS
- PLATFORM
- Both
- PERFORMANCE
- Light
LIVE PLAYGROUND
STRUCTURE / 56PX
CSS / CSS
.grid-bg {
background-image:
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}