Grid with dashed lines
Create a grid of dashed lines using a few lines of code
- One property
- Two gradients
- Easy to adjust using CSS variables
html {
--s: 100px; /* control the size of the grid */
--n: 4; /* control the granularity */
--t: 2px; /* the thickness */
--g: 10px; /* the gap between dashes */
--c:#556270 25%,#0000 0;
background:
conic-gradient(at var(--g) var(--t),var(--c))
calc((var(--s)/var(--n) - var(--g) + var(--t))/2) 0/
calc(var(--s)/var(--n)) var(--s),
conic-gradient(from 180deg at var(--t) var(--g),var(--c))
0 calc((var(--s)/var(--n) - var(--g) + var(--t))/2)/
var(--s) calc(var(--s)/var(--n));
}See the Pen CSS-only Grid of dashed lines by Temani Afif (@t_afif) on CodePen.
More CSS Tips
- A color overlay above your images Use outline to add an overlay to your image.
- Tooltip using mask Use CSS mask to create a tooltip with a gradient coloration.
- 3D effect on images a clip-path trick to apply a 3D effect on images.
- CSS-only folded ribbon Use clip-path to create fanct folded ribbon.