Dark Background Patterns in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<div><span class="lbl">Grids and lines</span><div class="bp-grid bp-3">
<div class="bp bp-dark-dots bp-tile"><span class="bp-tag">Dot grid</span></div>
<div class="bp bp-glow-grid bp-tile"><span class="bp-tag">Glow grid</span></div>
<div class="bp bp-hatch bp-tile"><span class="bp-tag">Fine hatch</span></div>
</div></div>
<div><span class="lbl">Mesh, contours and grain</span><div class="bp-grid bp-3">
<div class="bp bp-night-mesh bp-tile"><span class="bp-tag">Night mesh</span></div>
<div class="bp bp-svg bp-dark-topo bp-tile"><span class="bp-tag">Contour lines</span></div>
<div class="bp bp-svg bp-dusk-grain bp-tile"><span class="bp-tag">Grain on dusk</span></div>
</div></div>

CSS

/* Dark background patterns: low-opacity light ink on near-black grounds. Re-theme with the --bp-* properties. */
/* Base: the pattern is painted on ::before, under the content (isolation:isolate), so --bp-opacity
   fades only the pattern, never the text on top of it. */
.bp{--bp-opacity:1;position:relative;isolation:isolate;overflow:hidden;background:var(--bp-bg)}
.bp::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--bp-opacity)}
/* SVG patterns: the drawing is used as a mask, so --bp-color paints it and --bp-size sets the tile width. */
.bp-svg::before{background-color:var(--bp-color);-webkit-mask:var(--bp-svg) 0 0/var(--bp-size) repeat;mask:var(--bp-svg) 0 0/var(--bp-size) repeat}
/* Dot grid: slate dots, small enough to stay quiet on navy */
.bp-dark-dots{--bp-bg:#0f172a;--bp-color:#94a3b8;--bp-size:20px;--bp-dot:1.2px;--bp-opacity:.45}
.bp-dark-dots::before{background-image:radial-gradient(circle,var(--bp-color) var(--bp-dot),transparent calc(var(--bp-dot) + .5px));background-size:var(--bp-size) var(--bp-size)}
/* Glow grid: indigo lines under a top glow, faded out with a mask */
.bp-glow-grid{--bp-bg:radial-gradient(80% 60% at 50% 0%,#312e81,#0b0f19 70%);--bp-color:#818cf8;--bp-size:32px;--bp-line:1px;--bp-opacity:.35}
.bp-glow-grid::before{background-image:linear-gradient(var(--bp-color) var(--bp-line),transparent var(--bp-line)),linear-gradient(90deg,var(--bp-color) var(--bp-line),transparent var(--bp-line));background-size:var(--bp-size) var(--bp-size)}
.bp-glow-grid::before{-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
/* Fine hatch: hairline diagonals at 8% */
.bp-hatch{--bp-bg:#111827;--bp-color:#e5e7eb;--bp-size:10px;--bp-line:1px;--bp-opacity:.08}
.bp-hatch::before{background-image:repeating-linear-gradient(135deg,var(--bp-color) 0 var(--bp-line),transparent var(--bp-line) var(--bp-size))}
/* Night mesh: the corner mesh in deep jewel tones on near-black */
.bp-night-mesh{--bp-bg:#020617;--bp-c1:#4338ca;--bp-c2:#0e7490;--bp-c3:#7e22ce;--bp-c4:#be185d;--bp-size:75%;--bp-opacity:.7}
.bp-night-mesh::before{background-image:radial-gradient(var(--bp-size) var(--bp-size) at 0% 0%,var(--bp-c1),transparent 70%),radial-gradient(var(--bp-size) var(--bp-size) at 100% 0%,var(--bp-c2),transparent 70%),radial-gradient(var(--bp-size) var(--bp-size) at 100% 100%,var(--bp-c3),transparent 70%),radial-gradient(var(--bp-size) var(--bp-size) at 0% 100%,var(--bp-c4),transparent 70%)}
/* Contour lines: the topography drawing as a cyan mask */
.bp-dark-topo{--bp-bg:#0b1120;--bp-color:#22d3ee;--bp-size:240px;--bp-opacity:.24;--bp-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><path d='M102.2 92C102.3 93.1 101.9 94.4 101.4 95.4C100.8 96.4 99.8 97.2 98.9 97.8C98 98.4 97 98.8 96.1 99C95.1 99.2 94.1 99 93.2 99.1C92.4 99.1 91.7 99.1 90.7 99.4C89.7 99.6 88.3 100.6 87 100.6C85.8 100.6 83.8 100.4 83 99.5C82.2 98.7 81.9 96.9 82 95.6C82.1 94.4 83.1 93 83.6 92C84.1 91 84.5 90.2 84.9 89.4C85.4 88.6 85.7 87.9 86.2 87.1C86.7 86.4 87.2 85.6 87.9 84.8C88.5 84 89.3 82.9 90.3 82.4C91.3 81.9 92.8 81.4 93.8 81.7C94.9 82 95.8 83.2 96.5 84.1C97.2 85 97.4 86.1 98 87C98.6 87.8 99.6 88.2 100.3 89C100.9 89.8 102 90.9 102.2 92ZM117.9 90.8C118.3 93.4 117.3 96.6 116 99C114.7 101.3 112.2 103.2 110.1 104.7C108 106.1 105.5 107.1 103.3 107.6C101 108.1 98.7 107.5 96.6 107.7C94.4 107.8 93 107.9 90.5 108.5C88 109.1 84.8 111.3 81.8 111.3C78.7 111.4 74.1 110.8 72.1 108.8C70.1 106.8 69.5 102.5 69.7 99.5C69.9 96.5 72.3 93.3 73.5 90.8C74.6 88.3 75.7 86.6 76.8 84.7C77.8 82.7 78.6 81 79.7 79.1C80.9 77.3 82.1 75.5 83.7 73.7C85.3 71.8 87.2 69.1 89.5 67.8C91.9 66.6 95.5 65.5 97.9 66.2C100.4 66.9 102.8 69.9 104.5 72C106.1 74.1 106.5 76.8 108 78.7C109.4 80.7 111.7 81.6 113.3 83.6C115 85.6 117.4 88.2 117.9 90.8ZM133.6 89.6C134.3 93.6 132.7 98.8 130.6 102.5C128.6 106.1 124.7 109.2 121.3 111.5C118 113.8 114.1 115.4 110.5 116.1C107 116.9 103.3 116 99.9 116.3C96.5 116.5 94.2 116.6 90.3 117.5C86.4 118.5 81.3 122 76.5 122C71.6 122.1 64.4 121.2 61.2 118.1C58.1 115 57.1 108.1 57.4 103.3C57.8 98.6 61.5 93.5 63.3 89.6C65.2 85.7 66.9 83 68.6 79.9C70.2 76.8 71.4 74.1 73.2 71.2C75.1 68.3 77 65.5 79.6 62.5C82.1 59.5 85 55.2 88.8 53.3C92.5 51.3 98.1 49.6 102.1 50.7C106 51.8 109.7 56.5 112.4 59.8C115 63.1 115.6 67.5 117.9 70.5C120.3 73.6 123.8 75.1 126.4 78.3C129 81.4 132.9 85.6 133.6 89.6ZM149.3 88.4C150.2 93.9 148 101 145.2 106C142.4 111 137.1 115.3 132.5 118.4C127.9 121.5 122.6 123.6 117.8 124.7C112.9 125.8 107.8 124.6 103.2 124.9C98.6 125.2 95.4 125.3 90.1 126.6C84.7 127.9 77.8 132.6 71.2 132.8C64.6 132.9 54.7 131.6 50.4 127.4C46 123.1 44.7 113.7 45.2 107.2C45.6 100.7 50.7 93.7 53.2 88.4C55.8 83.1 58.1 79.3 60.4 75.1C62.6 70.9 64.3 67.2 66.8 63.2C69.3 59.2 71.9 55.4 75.4 51.3C78.9 47.2 82.9 41.4 88 38.7C93.2 36 100.8 33.7 106.2 35.2C111.6 36.7 116.7 43.2 120.3 47.7C123.9 52.2 124.7 58.1 127.9 62.3C131.1 66.5 135.9 68.5 139.4 72.9C143 77.2 148.3 82.9 149.3 88.4ZM165 87.2C166.2 94.2 163.4 103.2 159.9 109.6C156.3 115.9 149.5 121.3 143.7 125.2C137.9 129.2 131.2 131.9 125 133.3C118.8 134.6 112.4 133.1 106.6 133.5C100.7 133.9 96.6 134 89.9 135.7C83.1 137.3 74.3 143.3 65.9 143.5C57.5 143.7 45 142.1 39.5 136.6C34 131.2 32.3 119.3 32.9 111C33.5 102.8 39.9 94 43.1 87.2C46.3 80.4 49.3 75.7 52.2 70.4C55 65 57.1 60.3 60.3 55.2C63.5 50.2 66.7 45.3 71.2 40.2C75.7 35 80.8 27.6 87.3 24.2C93.8 20.7 103.5 17.8 110.3 19.7C117.1 21.6 123.6 29.8 128.2 35.6C132.8 41.3 133.8 48.8 137.8 54.1C141.9 59.4 148 62 152.5 67.5C157 73 163.7 80.2 165 87.2ZM247.5 232C247.3 233.2 245.9 234.5 244.9 235.2C243.9 236 242.3 236 241.4 236.5C240.5 237 240.2 237.4 239.5 238.1C238.9 238.8 238.4 240 237.5 240.5C236.6 241.1 235.4 241.4 234.3 241.4C233.3 241.4 232 241.1 231.1 240.5C230.1 240 229.1 239.2 228.5 238.3C228 237.3 227.9 236 227.8 235C227.7 233.9 228.1 233 228 232C227.9 231 227.3 230 227.3 228.8C227.3 227.7 227.2 226.1 227.9 225.2C228.5 224.3 230 223.8 231.2 223.6C232.3 223.5 233.6 224.2 234.7 224.4C235.7 224.6 236.4 224.7 237.3 224.9C238.1 225 239 224.9 240 225.1C240.9 225.3 242 225.6 243 226.1C244 226.7 245.4 227.3 246.2 228.3C246.9 229.3 247.7 230.8 247.5 232ZM265 230.8C264.5 233.6 261.3 236.8 258.9 238.6C256.5 240.4 252.6 240.5 250.5 241.6C248.3 242.8 247.6 243.8 246 245.4C244.5 247 243.2 249.8 241.2 251.1C239.1 252.4 236.2 253.3 233.6 253.3C231.1 253.3 228.2 252.4 225.8 251.2C223.5 249.9 221.1 248 219.8 245.8C218.5 243.5 218.3 240.4 218 237.9C217.8 235.4 218.6 233.2 218.4 230.8C218.2 228.4 216.9 226 216.8 223.2C216.8 220.5 216.7 216.6 218.2 214.5C219.7 212.5 223.4 211.2 226.1 210.8C228.8 210.5 232 212.1 234.4 212.6C236.8 213.1 238.5 213.4 240.6 213.7C242.7 214 244.8 213.8 247.1 214.3C249.4 214.8 251.9 215.5 254.3 216.8C256.8 218 260.1 219.6 261.9 221.9C263.7 224.3 265.5 228 265 230.8ZM282.5 229.6C281.7 234 276.7 239 272.9 241.9C269.1 244.7 263 244.9 259.6 246.7C256.2 248.5 255 250.2 252.5 252.7C250.1 255.2 248.1 259.7 244.9 261.7C241.6 263.8 237 265.2 232.9 265.2C228.9 265.2 224.3 263.8 220.6 261.8C217 259.8 213.1 256.7 211 253.2C209 249.8 208.6 244.8 208.3 240.9C207.9 236.9 209.2 233.5 208.9 229.6C208.6 225.7 206.4 221.9 206.4 217.7C206.3 213.4 206.1 207.1 208.5 203.9C211 200.6 216.7 198.5 221 198C225.2 197.5 230.3 200 234.1 200.8C238 201.6 240.6 202.2 244 202.6C247.3 203.1 250.6 202.8 254.2 203.6C257.8 204.4 261.8 205.4 265.7 207.4C269.6 209.4 274.8 211.9 277.7 215.6C280.5 219.3 283.3 225.2 282.5 229.6ZM300.1 228.4C299 234.4 292.1 241.3 286.9 245.2C281.7 249.1 273.3 249.3 268.7 251.8C264 254.3 262.4 256.5 259 260C255.7 263.4 253 269.5 248.5 272.4C244.1 275.2 237.8 277 232.2 277C226.7 277.1 220.4 275.2 215.4 272.4C210.4 269.7 205.1 265.5 202.3 260.7C199.4 256 199 249.2 198.5 243.8C198 238.4 199.8 233.7 199.3 228.4C198.9 223.1 196 217.9 195.9 212.1C195.8 206.2 195.5 197.7 198.9 193.2C202.2 188.7 210 185.9 215.9 185.2C221.7 184.5 228.6 188 233.9 189C239.1 190 242.7 190.9 247.3 191.5C251.9 192.1 256.4 191.7 261.4 192.8C266.3 193.9 271.6 195.3 277 198C282.3 200.8 289.5 204.2 293.4 209.3C297.2 214.3 301.1 222.4 300.1 228.4ZM317.6 227.2C316.2 234.8 307.5 243.5 300.9 248.5C294.2 253.4 283.7 253.7 277.8 256.9C271.9 260 269.8 262.9 265.5 267.3C261.3 271.6 257.9 279.4 252.2 283C246.6 286.6 238.5 288.9 231.5 288.9C224.5 288.9 216.5 286.5 210.1 283.1C203.8 279.6 197.1 274.3 193.5 268.2C189.9 262.2 189.3 253.6 188.7 246.7C188.1 239.9 190.3 233.9 189.8 227.2C189.3 220.5 185.5 213.9 185.4 206.5C185.3 199 185 188.2 189.2 182.6C193.4 176.9 203.4 173.3 210.8 172.4C218.2 171.5 226.9 175.9 233.6 177.2C240.2 178.5 244.8 179.6 250.7 180.4C256.5 181.2 262.2 180.6 268.5 182C274.8 183.4 281.5 185.2 288.3 188.7C295.1 192.2 304.3 196.5 309.1 202.9C314 209.3 319 219.6 317.6 227.2ZM259.9 74C260 75 259.7 76.5 259 77.3C258.4 78.1 256.8 78.5 255.9 79C255 79.4 254.3 79.6 253.6 80.2C252.8 80.8 252.4 82 251.5 82.7C250.6 83.4 249.3 84.3 248.2 84.4C247 84.5 245.6 84 244.6 83.3C243.6 82.7 242.6 81.6 242.2 80.6C241.7 79.5 241.7 78.1 241.9 77C242 75.9 243 74.9 243.3 74C243.6 73.1 243.7 72.7 243.6 71.7C243.5 70.7 242.8 69.2 242.9 68.1C243.1 66.9 243.7 65.3 244.6 64.6C245.5 63.9 247.1 63.9 248.2 64C249.4 64.1 250.6 64.7 251.6 65.1C252.6 65.5 253.5 65.9 254.3 66.5C255.1 67.1 255.8 67.9 256.4 68.6C257.1 69.4 257.7 70.1 258.3 71C258.9 71.9 259.8 73 259.9 74ZM275.3 72.8C275.5 75.3 274.7 78.7 273.1 80.6C271.6 82.6 267.9 83.5 265.7 84.6C263.5 85.8 261.9 86.1 260.1 87.6C258.4 89.1 257.4 92 255.3 93.7C253.1 95.4 250 97.4 247.2 97.6C244.5 97.8 241.1 96.6 238.7 95.1C236.3 93.6 234 91 232.9 88.5C231.8 85.9 231.7 82.5 232.2 79.9C232.6 77.3 234.9 74.9 235.6 72.8C236.3 70.7 236.5 69.6 236.3 67.2C236.2 64.9 234.3 61.4 234.7 58.6C235.1 55.8 236.5 52 238.7 50.4C240.8 48.8 244.6 48.8 247.4 49C250.2 49.1 252.9 50.5 255.4 51.5C257.8 52.5 260 53.5 261.9 55C263.8 56.4 265.4 58.2 266.9 59.9C268.5 61.7 270 63.5 271.4 65.6C272.8 67.7 275 70.3 275.3 72.8ZM290.6 71.6C291.1 75.6 289.8 80.9 287.3 84C284.8 87.1 278.9 88.5 275.5 90.3C272.1 92.1 269.4 92.6 266.7 95C263.9 97.4 262.4 102 259 104.6C255.6 107.3 250.7 110.4 246.3 110.8C241.9 111.2 236.6 109.3 232.8 106.9C229.1 104.5 225.4 100.4 223.7 96.4C221.9 92.4 221.8 86.9 222.5 82.8C223.2 78.7 226.8 74.9 227.9 71.6C229 68.3 229.3 66.5 229.1 62.8C228.8 59.1 225.9 53.6 226.5 49.2C227.1 44.7 229.4 38.7 232.7 36.2C236.1 33.6 242.2 33.6 246.6 33.9C250.9 34.2 255.3 36.3 259.1 37.9C263 39.5 266.4 41.2 269.5 43.4C272.5 45.6 274.9 48.4 277.4 51.3C279.9 54.1 282.3 56.8 284.5 60.2C286.7 63.6 290.1 67.6 290.6 71.6ZM84.1 250C84.1 251.1 83.3 252.3 82.7 253.2C82.1 254.1 81.3 254.8 80.5 255.4C79.6 256 78.7 256.4 77.9 256.7C77 257 76.2 256.9 75.3 257.3C74.4 257.6 73.6 258.3 72.5 258.8C71.3 259.2 69.6 260 68.4 259.8C67.2 259.5 65.7 258.4 65.3 257.3C64.8 256.2 65.2 254.3 65.4 253.1C65.7 251.9 66.3 250.9 66.6 250C66.9 249.1 66.9 248.3 67.1 247.5C67.3 246.6 67.5 245.8 67.9 244.9C68.3 244 68.7 242.9 69.4 242C70.1 241.1 71.1 239.9 72.2 239.6C73.2 239.3 74.8 239.5 75.8 240C76.8 240.6 77.4 242 78.2 242.8C78.9 243.6 79.3 244.2 80.1 244.9C80.9 245.5 82.2 245.9 82.9 246.8C83.5 247.6 84.1 248.9 84.1 250ZM99.7 248.8C99.6 251.4 97.9 254.2 96.4 256.4C95 258.5 93 260.3 91 261.7C89.1 263.1 86.9 264 84.8 264.8C82.8 265.5 80.8 265.4 78.7 266.2C76.5 267 74.7 268.7 71.9 269.7C69.2 270.7 65 272.7 62.1 272.1C59.3 271.6 55.9 269 54.7 266.3C53.5 263.7 54.6 259.2 55.1 256.3C55.7 253.3 57.3 251 57.9 248.8C58.6 246.6 58.6 244.9 59.2 242.8C59.7 240.8 60.1 238.7 61 236.6C61.9 234.4 62.9 231.8 64.6 229.7C66.3 227.6 68.7 224.7 71.2 223.9C73.8 223.2 77.4 223.7 79.8 225C82.2 226.3 83.8 229.7 85.5 231.6C87.3 233.5 88.4 234.9 90.2 236.5C92.1 238.1 95.3 239 96.8 241.1C98.4 243.1 99.8 246.2 99.7 248.8ZM115.3 247.6C115.2 251.6 112.5 256.2 110.2 259.6C107.9 263 104.7 265.9 101.6 268.1C98.5 270.3 95 271.6 91.8 272.8C88.5 274 85.5 273.8 82.1 275.1C78.7 276.5 75.7 279.1 71.4 280.7C67 282.3 60.4 285.4 55.9 284.5C51.3 283.6 46 279.5 44.2 275.3C42.3 271.1 44 264 44.8 259.4C45.7 254.8 48.2 251.1 49.3 247.6C50.3 244.1 50.4 241.4 51.2 238.1C52 234.9 52.7 231.7 54.1 228.2C55.6 224.8 57.1 220.7 59.8 217.4C62.5 214.1 66.3 209.5 70.3 208.3C74.3 207.1 80.1 207.9 83.8 209.9C87.6 212 90.1 217.4 92.9 220.4C95.6 223.5 97.4 225.7 100.4 228.2C103.3 230.7 108.3 232.1 110.8 235.4C113.3 238.6 115.4 243.6 115.3 247.6Z' fill='none' stroke='%23000' stroke-width='1.4'/></svg>")}
/* Grain on dusk: white noise at 12% over a dark gradient, which hides banding */
.bp-dusk-grain{--bp-bg:linear-gradient(160deg,#1e1b4b,#0f172a 60%,#042f2e);--bp-color:#fff;--bp-size:140px;--bp-opacity:.12;--bp-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
/* Demo tile and name chip */
.bp-tile{min-height:var(--bp-tile-h,180px);border-radius:16px;border:1px solid rgb(255 255 255 / .1)}
/* The name chip is an opaque scrim, so its text keeps 4.5:1 whatever pattern is underneath. */
.bp-tag{position:absolute;left:16px;bottom:16px;padding:4px 8px;border-radius:6px;background:#212529;color:#dee2e6;border:1px solid #495057;font-size:.875rem;font-weight:600;line-height:1.5}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<div><span class="lbl">Grids and lines</span><div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col"><div class="bp bp-dark-dots bp-tile rounded-4 border border-white border-opacity-10"><span class="position-absolute start-0 bottom-0 m-3 px-2 py-1 rounded-2 bg-body text-body border small fw-semibold lh-base">Dot grid</span></div></div>
<div class="col"><div class="bp bp-glow-grid bp-tile rounded-4 border border-white border-opacity-10"><span class="position-absolute start-0 bottom-0 m-3 px-2 py-1 rounded-2 bg-body text-body border small fw-semibold lh-base">Glow grid</span></div></div>
<div class="col"><div class="bp bp-hatch bp-tile rounded-4 border border-white border-opacity-10"><span class="position-absolute start-0 bottom-0 m-3 px-2 py-1 rounded-2 bg-body text-body border small fw-semibold lh-base">Fine hatch</span></div></div>
</div></div>
<div><span class="lbl">Mesh, contours and grain</span><div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
<div class="col"><div class="bp bp-night-mesh bp-tile rounded-4 border border-white border-opacity-10"><span class="position-absolute start-0 bottom-0 m-3 px-2 py-1 rounded-2 bg-body text-body border small fw-semibold lh-base">Night mesh</span></div></div>
<div class="col"><div class="bp bp-svg bp-dark-topo bp-tile rounded-4 border border-white border-opacity-10"><span class="position-absolute start-0 bottom-0 m-3 px-2 py-1 rounded-2 bg-body text-body border small fw-semibold lh-base">Contour lines</span></div></div>
<div class="col"><div class="bp bp-svg bp-dusk-grain bp-tile rounded-4 border border-white border-opacity-10"><span class="position-absolute start-0 bottom-0 m-3 px-2 py-1 rounded-2 bg-body text-body border small fw-semibold lh-base">Grain on dusk</span></div></div>
</div></div>

CSS

/* Dark background patterns: low-opacity light ink on near-black grounds. Re-theme with the --bp-* properties. */
/* Base: the pattern is painted on ::before, under the content (isolation:isolate), so --bp-opacity
   fades only the pattern, never the text on top of it. */
.bp{--bp-opacity:1;position:relative;isolation:isolate;overflow:hidden;background:var(--bp-bg)}
.bp::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--bp-opacity)}
/* SVG patterns: the drawing is used as a mask, so --bp-color paints it and --bp-size sets the tile width. */
.bp-svg::before{background-color:var(--bp-color);-webkit-mask:var(--bp-svg) 0 0/var(--bp-size) repeat;mask:var(--bp-svg) 0 0/var(--bp-size) repeat}
/* Dot grid: slate dots, small enough to stay quiet on navy */
.bp-dark-dots{--bp-bg:#0f172a;--bp-color:#94a3b8;--bp-size:20px;--bp-dot:1.2px;--bp-opacity:.45}
.bp-dark-dots::before{background-image:radial-gradient(circle,var(--bp-color) var(--bp-dot),transparent calc(var(--bp-dot) + .5px));background-size:var(--bp-size) var(--bp-size)}
/* Glow grid: indigo lines under a top glow, faded out with a mask */
.bp-glow-grid{--bp-bg:radial-gradient(80% 60% at 50% 0%,#312e81,#0b0f19 70%);--bp-color:#818cf8;--bp-size:32px;--bp-line:1px;--bp-opacity:.35}
.bp-glow-grid::before{background-image:linear-gradient(var(--bp-color) var(--bp-line),transparent var(--bp-line)),linear-gradient(90deg,var(--bp-color) var(--bp-line),transparent var(--bp-line));background-size:var(--bp-size) var(--bp-size)}
.bp-glow-grid::before{-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
/* Fine hatch: hairline diagonals at 8% */
.bp-hatch{--bp-bg:#111827;--bp-color:#e5e7eb;--bp-size:10px;--bp-line:1px;--bp-opacity:.08}
.bp-hatch::before{background-image:repeating-linear-gradient(135deg,var(--bp-color) 0 var(--bp-line),transparent var(--bp-line) var(--bp-size))}
/* Night mesh: the corner mesh in deep jewel tones on near-black */
.bp-night-mesh{--bp-bg:#020617;--bp-c1:#4338ca;--bp-c2:#0e7490;--bp-c3:#7e22ce;--bp-c4:#be185d;--bp-size:75%;--bp-opacity:.7}
.bp-night-mesh::before{background-image:radial-gradient(var(--bp-size) var(--bp-size) at 0% 0%,var(--bp-c1),transparent 70%),radial-gradient(var(--bp-size) var(--bp-size) at 100% 0%,var(--bp-c2),transparent 70%),radial-gradient(var(--bp-size) var(--bp-size) at 100% 100%,var(--bp-c3),transparent 70%),radial-gradient(var(--bp-size) var(--bp-size) at 0% 100%,var(--bp-c4),transparent 70%)}
/* Contour lines: the topography drawing as a cyan mask */
.bp-dark-topo{--bp-bg:#0b1120;--bp-color:#22d3ee;--bp-size:240px;--bp-opacity:.24;--bp-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><path d='M102.2 92C102.3 93.1 101.9 94.4 101.4 95.4C100.8 96.4 99.8 97.2 98.9 97.8C98 98.4 97 98.8 96.1 99C95.1 99.2 94.1 99 93.2 99.1C92.4 99.1 91.7 99.1 90.7 99.4C89.7 99.6 88.3 100.6 87 100.6C85.8 100.6 83.8 100.4 83 99.5C82.2 98.7 81.9 96.9 82 95.6C82.1 94.4 83.1 93 83.6 92C84.1 91 84.5 90.2 84.9 89.4C85.4 88.6 85.7 87.9 86.2 87.1C86.7 86.4 87.2 85.6 87.9 84.8C88.5 84 89.3 82.9 90.3 82.4C91.3 81.9 92.8 81.4 93.8 81.7C94.9 82 95.8 83.2 96.5 84.1C97.2 85 97.4 86.1 98 87C98.6 87.8 99.6 88.2 100.3 89C100.9 89.8 102 90.9 102.2 92ZM117.9 90.8C118.3 93.4 117.3 96.6 116 99C114.7 101.3 112.2 103.2 110.1 104.7C108 106.1 105.5 107.1 103.3 107.6C101 108.1 98.7 107.5 96.6 107.7C94.4 107.8 93 107.9 90.5 108.5C88 109.1 84.8 111.3 81.8 111.3C78.7 111.4 74.1 110.8 72.1 108.8C70.1 106.8 69.5 102.5 69.7 99.5C69.9 96.5 72.3 93.3 73.5 90.8C74.6 88.3 75.7 86.6 76.8 84.7C77.8 82.7 78.6 81 79.7 79.1C80.9 77.3 82.1 75.5 83.7 73.7C85.3 71.8 87.2 69.1 89.5 67.8C91.9 66.6 95.5 65.5 97.9 66.2C100.4 66.9 102.8 69.9 104.5 72C106.1 74.1 106.5 76.8 108 78.7C109.4 80.7 111.7 81.6 113.3 83.6C115 85.6 117.4 88.2 117.9 90.8ZM133.6 89.6C134.3 93.6 132.7 98.8 130.6 102.5C128.6 106.1 124.7 109.2 121.3 111.5C118 113.8 114.1 115.4 110.5 116.1C107 116.9 103.3 116 99.9 116.3C96.5 116.5 94.2 116.6 90.3 117.5C86.4 118.5 81.3 122 76.5 122C71.6 122.1 64.4 121.2 61.2 118.1C58.1 115 57.1 108.1 57.4 103.3C57.8 98.6 61.5 93.5 63.3 89.6C65.2 85.7 66.9 83 68.6 79.9C70.2 76.8 71.4 74.1 73.2 71.2C75.1 68.3 77 65.5 79.6 62.5C82.1 59.5 85 55.2 88.8 53.3C92.5 51.3 98.1 49.6 102.1 50.7C106 51.8 109.7 56.5 112.4 59.8C115 63.1 115.6 67.5 117.9 70.5C120.3 73.6 123.8 75.1 126.4 78.3C129 81.4 132.9 85.6 133.6 89.6ZM149.3 88.4C150.2 93.9 148 101 145.2 106C142.4 111 137.1 115.3 132.5 118.4C127.9 121.5 122.6 123.6 117.8 124.7C112.9 125.8 107.8 124.6 103.2 124.9C98.6 125.2 95.4 125.3 90.1 126.6C84.7 127.9 77.8 132.6 71.2 132.8C64.6 132.9 54.7 131.6 50.4 127.4C46 123.1 44.7 113.7 45.2 107.2C45.6 100.7 50.7 93.7 53.2 88.4C55.8 83.1 58.1 79.3 60.4 75.1C62.6 70.9 64.3 67.2 66.8 63.2C69.3 59.2 71.9 55.4 75.4 51.3C78.9 47.2 82.9 41.4 88 38.7C93.2 36 100.8 33.7 106.2 35.2C111.6 36.7 116.7 43.2 120.3 47.7C123.9 52.2 124.7 58.1 127.9 62.3C131.1 66.5 135.9 68.5 139.4 72.9C143 77.2 148.3 82.9 149.3 88.4ZM165 87.2C166.2 94.2 163.4 103.2 159.9 109.6C156.3 115.9 149.5 121.3 143.7 125.2C137.9 129.2 131.2 131.9 125 133.3C118.8 134.6 112.4 133.1 106.6 133.5C100.7 133.9 96.6 134 89.9 135.7C83.1 137.3 74.3 143.3 65.9 143.5C57.5 143.7 45 142.1 39.5 136.6C34 131.2 32.3 119.3 32.9 111C33.5 102.8 39.9 94 43.1 87.2C46.3 80.4 49.3 75.7 52.2 70.4C55 65 57.1 60.3 60.3 55.2C63.5 50.2 66.7 45.3 71.2 40.2C75.7 35 80.8 27.6 87.3 24.2C93.8 20.7 103.5 17.8 110.3 19.7C117.1 21.6 123.6 29.8 128.2 35.6C132.8 41.3 133.8 48.8 137.8 54.1C141.9 59.4 148 62 152.5 67.5C157 73 163.7 80.2 165 87.2ZM247.5 232C247.3 233.2 245.9 234.5 244.9 235.2C243.9 236 242.3 236 241.4 236.5C240.5 237 240.2 237.4 239.5 238.1C238.9 238.8 238.4 240 237.5 240.5C236.6 241.1 235.4 241.4 234.3 241.4C233.3 241.4 232 241.1 231.1 240.5C230.1 240 229.1 239.2 228.5 238.3C228 237.3 227.9 236 227.8 235C227.7 233.9 228.1 233 228 232C227.9 231 227.3 230 227.3 228.8C227.3 227.7 227.2 226.1 227.9 225.2C228.5 224.3 230 223.8 231.2 223.6C232.3 223.5 233.6 224.2 234.7 224.4C235.7 224.6 236.4 224.7 237.3 224.9C238.1 225 239 224.9 240 225.1C240.9 225.3 242 225.6 243 226.1C244 226.7 245.4 227.3 246.2 228.3C246.9 229.3 247.7 230.8 247.5 232ZM265 230.8C264.5 233.6 261.3 236.8 258.9 238.6C256.5 240.4 252.6 240.5 250.5 241.6C248.3 242.8 247.6 243.8 246 245.4C244.5 247 243.2 249.8 241.2 251.1C239.1 252.4 236.2 253.3 233.6 253.3C231.1 253.3 228.2 252.4 225.8 251.2C223.5 249.9 221.1 248 219.8 245.8C218.5 243.5 218.3 240.4 218 237.9C217.8 235.4 218.6 233.2 218.4 230.8C218.2 228.4 216.9 226 216.8 223.2C216.8 220.5 216.7 216.6 218.2 214.5C219.7 212.5 223.4 211.2 226.1 210.8C228.8 210.5 232 212.1 234.4 212.6C236.8 213.1 238.5 213.4 240.6 213.7C242.7 214 244.8 213.8 247.1 214.3C249.4 214.8 251.9 215.5 254.3 216.8C256.8 218 260.1 219.6 261.9 221.9C263.7 224.3 265.5 228 265 230.8ZM282.5 229.6C281.7 234 276.7 239 272.9 241.9C269.1 244.7 263 244.9 259.6 246.7C256.2 248.5 255 250.2 252.5 252.7C250.1 255.2 248.1 259.7 244.9 261.7C241.6 263.8 237 265.2 232.9 265.2C228.9 265.2 224.3 263.8 220.6 261.8C217 259.8 213.1 256.7 211 253.2C209 249.8 208.6 244.8 208.3 240.9C207.9 236.9 209.2 233.5 208.9 229.6C208.6 225.7 206.4 221.9 206.4 217.7C206.3 213.4 206.1 207.1 208.5 203.9C211 200.6 216.7 198.5 221 198C225.2 197.5 230.3 200 234.1 200.8C238 201.6 240.6 202.2 244 202.6C247.3 203.1 250.6 202.8 254.2 203.6C257.8 204.4 261.8 205.4 265.7 207.4C269.6 209.4 274.8 211.9 277.7 215.6C280.5 219.3 283.3 225.2 282.5 229.6ZM300.1 228.4C299 234.4 292.1 241.3 286.9 245.2C281.7 249.1 273.3 249.3 268.7 251.8C264 254.3 262.4 256.5 259 260C255.7 263.4 253 269.5 248.5 272.4C244.1 275.2 237.8 277 232.2 277C226.7 277.1 220.4 275.2 215.4 272.4C210.4 269.7 205.1 265.5 202.3 260.7C199.4 256 199 249.2 198.5 243.8C198 238.4 199.8 233.7 199.3 228.4C198.9 223.1 196 217.9 195.9 212.1C195.8 206.2 195.5 197.7 198.9 193.2C202.2 188.7 210 185.9 215.9 185.2C221.7 184.5 228.6 188 233.9 189C239.1 190 242.7 190.9 247.3 191.5C251.9 192.1 256.4 191.7 261.4 192.8C266.3 193.9 271.6 195.3 277 198C282.3 200.8 289.5 204.2 293.4 209.3C297.2 214.3 301.1 222.4 300.1 228.4ZM317.6 227.2C316.2 234.8 307.5 243.5 300.9 248.5C294.2 253.4 283.7 253.7 277.8 256.9C271.9 260 269.8 262.9 265.5 267.3C261.3 271.6 257.9 279.4 252.2 283C246.6 286.6 238.5 288.9 231.5 288.9C224.5 288.9 216.5 286.5 210.1 283.1C203.8 279.6 197.1 274.3 193.5 268.2C189.9 262.2 189.3 253.6 188.7 246.7C188.1 239.9 190.3 233.9 189.8 227.2C189.3 220.5 185.5 213.9 185.4 206.5C185.3 199 185 188.2 189.2 182.6C193.4 176.9 203.4 173.3 210.8 172.4C218.2 171.5 226.9 175.9 233.6 177.2C240.2 178.5 244.8 179.6 250.7 180.4C256.5 181.2 262.2 180.6 268.5 182C274.8 183.4 281.5 185.2 288.3 188.7C295.1 192.2 304.3 196.5 309.1 202.9C314 209.3 319 219.6 317.6 227.2ZM259.9 74C260 75 259.7 76.5 259 77.3C258.4 78.1 256.8 78.5 255.9 79C255 79.4 254.3 79.6 253.6 80.2C252.8 80.8 252.4 82 251.5 82.7C250.6 83.4 249.3 84.3 248.2 84.4C247 84.5 245.6 84 244.6 83.3C243.6 82.7 242.6 81.6 242.2 80.6C241.7 79.5 241.7 78.1 241.9 77C242 75.9 243 74.9 243.3 74C243.6 73.1 243.7 72.7 243.6 71.7C243.5 70.7 242.8 69.2 242.9 68.1C243.1 66.9 243.7 65.3 244.6 64.6C245.5 63.9 247.1 63.9 248.2 64C249.4 64.1 250.6 64.7 251.6 65.1C252.6 65.5 253.5 65.9 254.3 66.5C255.1 67.1 255.8 67.9 256.4 68.6C257.1 69.4 257.7 70.1 258.3 71C258.9 71.9 259.8 73 259.9 74ZM275.3 72.8C275.5 75.3 274.7 78.7 273.1 80.6C271.6 82.6 267.9 83.5 265.7 84.6C263.5 85.8 261.9 86.1 260.1 87.6C258.4 89.1 257.4 92 255.3 93.7C253.1 95.4 250 97.4 247.2 97.6C244.5 97.8 241.1 96.6 238.7 95.1C236.3 93.6 234 91 232.9 88.5C231.8 85.9 231.7 82.5 232.2 79.9C232.6 77.3 234.9 74.9 235.6 72.8C236.3 70.7 236.5 69.6 236.3 67.2C236.2 64.9 234.3 61.4 234.7 58.6C235.1 55.8 236.5 52 238.7 50.4C240.8 48.8 244.6 48.8 247.4 49C250.2 49.1 252.9 50.5 255.4 51.5C257.8 52.5 260 53.5 261.9 55C263.8 56.4 265.4 58.2 266.9 59.9C268.5 61.7 270 63.5 271.4 65.6C272.8 67.7 275 70.3 275.3 72.8ZM290.6 71.6C291.1 75.6 289.8 80.9 287.3 84C284.8 87.1 278.9 88.5 275.5 90.3C272.1 92.1 269.4 92.6 266.7 95C263.9 97.4 262.4 102 259 104.6C255.6 107.3 250.7 110.4 246.3 110.8C241.9 111.2 236.6 109.3 232.8 106.9C229.1 104.5 225.4 100.4 223.7 96.4C221.9 92.4 221.8 86.9 222.5 82.8C223.2 78.7 226.8 74.9 227.9 71.6C229 68.3 229.3 66.5 229.1 62.8C228.8 59.1 225.9 53.6 226.5 49.2C227.1 44.7 229.4 38.7 232.7 36.2C236.1 33.6 242.2 33.6 246.6 33.9C250.9 34.2 255.3 36.3 259.1 37.9C263 39.5 266.4 41.2 269.5 43.4C272.5 45.6 274.9 48.4 277.4 51.3C279.9 54.1 282.3 56.8 284.5 60.2C286.7 63.6 290.1 67.6 290.6 71.6ZM84.1 250C84.1 251.1 83.3 252.3 82.7 253.2C82.1 254.1 81.3 254.8 80.5 255.4C79.6 256 78.7 256.4 77.9 256.7C77 257 76.2 256.9 75.3 257.3C74.4 257.6 73.6 258.3 72.5 258.8C71.3 259.2 69.6 260 68.4 259.8C67.2 259.5 65.7 258.4 65.3 257.3C64.8 256.2 65.2 254.3 65.4 253.1C65.7 251.9 66.3 250.9 66.6 250C66.9 249.1 66.9 248.3 67.1 247.5C67.3 246.6 67.5 245.8 67.9 244.9C68.3 244 68.7 242.9 69.4 242C70.1 241.1 71.1 239.9 72.2 239.6C73.2 239.3 74.8 239.5 75.8 240C76.8 240.6 77.4 242 78.2 242.8C78.9 243.6 79.3 244.2 80.1 244.9C80.9 245.5 82.2 245.9 82.9 246.8C83.5 247.6 84.1 248.9 84.1 250ZM99.7 248.8C99.6 251.4 97.9 254.2 96.4 256.4C95 258.5 93 260.3 91 261.7C89.1 263.1 86.9 264 84.8 264.8C82.8 265.5 80.8 265.4 78.7 266.2C76.5 267 74.7 268.7 71.9 269.7C69.2 270.7 65 272.7 62.1 272.1C59.3 271.6 55.9 269 54.7 266.3C53.5 263.7 54.6 259.2 55.1 256.3C55.7 253.3 57.3 251 57.9 248.8C58.6 246.6 58.6 244.9 59.2 242.8C59.7 240.8 60.1 238.7 61 236.6C61.9 234.4 62.9 231.8 64.6 229.7C66.3 227.6 68.7 224.7 71.2 223.9C73.8 223.2 77.4 223.7 79.8 225C82.2 226.3 83.8 229.7 85.5 231.6C87.3 233.5 88.4 234.9 90.2 236.5C92.1 238.1 95.3 239 96.8 241.1C98.4 243.1 99.8 246.2 99.7 248.8ZM115.3 247.6C115.2 251.6 112.5 256.2 110.2 259.6C107.9 263 104.7 265.9 101.6 268.1C98.5 270.3 95 271.6 91.8 272.8C88.5 274 85.5 273.8 82.1 275.1C78.7 276.5 75.7 279.1 71.4 280.7C67 282.3 60.4 285.4 55.9 284.5C51.3 283.6 46 279.5 44.2 275.3C42.3 271.1 44 264 44.8 259.4C45.7 254.8 48.2 251.1 49.3 247.6C50.3 244.1 50.4 241.4 51.2 238.1C52 234.9 52.7 231.7 54.1 228.2C55.6 224.8 57.1 220.7 59.8 217.4C62.5 214.1 66.3 209.5 70.3 208.3C74.3 207.1 80.1 207.9 83.8 209.9C87.6 212 90.1 217.4 92.9 220.4C95.6 223.5 97.4 225.7 100.4 228.2C103.3 230.7 108.3 232.1 110.8 235.4C113.3 238.6 115.4 243.6 115.3 247.6Z' fill='none' stroke='%23000' stroke-width='1.4'/></svg>")}
/* Grain on dusk: white noise at 12% over a dark gradient, which hides banding */
.bp-dusk-grain{--bp-bg:linear-gradient(160deg,#1e1b4b,#0f172a 60%,#042f2e);--bp-color:#fff;--bp-size:140px;--bp-opacity:.12;--bp-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
/* Demo tile height; corners, border and the name chip use Bootstrap utilities */
.bp-tile{min-height:var(--bp-tile-h,180px)}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#94a3b8] uppercase">Grids and lines</span><div class="grid grid-cols-1 gap-4 min-[576px]:grid-cols-2 min-[992px]:grid-cols-3">
<div class="bp-dark-dots relative min-h-[180px] overflow-hidden rounded-2xl border border-white/10"><span class="absolute bottom-4 left-4 rounded-md border border-[#495057] bg-[#212529] px-2 py-1 text-sm leading-normal font-semibold text-[#dee2e6]">Dot grid</span></div>
<div class="bp-glow-grid relative min-h-[180px] overflow-hidden rounded-2xl border border-white/10"><span class="absolute bottom-4 left-4 rounded-md border border-[#495057] bg-[#212529] px-2 py-1 text-sm leading-normal font-semibold text-[#dee2e6]">Glow grid</span></div>
<div class="bp-hatch relative min-h-[180px] overflow-hidden rounded-2xl border border-white/10"><span class="absolute bottom-4 left-4 rounded-md border border-[#495057] bg-[#212529] px-2 py-1 text-sm leading-normal font-semibold text-[#dee2e6]">Fine hatch</span></div>
</div></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#94a3b8] uppercase">Mesh, contours and grain</span><div class="grid grid-cols-1 gap-4 min-[576px]:grid-cols-2 min-[992px]:grid-cols-3">
<div class="bp-night-mesh relative min-h-[180px] overflow-hidden rounded-2xl border border-white/10"><span class="absolute bottom-4 left-4 rounded-md border border-[#495057] bg-[#212529] px-2 py-1 text-sm leading-normal font-semibold text-[#dee2e6]">Night mesh</span></div>
<div class="bp-dark-topo relative min-h-[180px] overflow-hidden rounded-2xl border border-white/10"><span class="absolute bottom-4 left-4 rounded-md border border-[#495057] bg-[#212529] px-2 py-1 text-sm leading-normal font-semibold text-[#dee2e6]">Contour lines</span></div>
<div class="bp-dusk-grain relative min-h-[180px] overflow-hidden rounded-2xl border border-white/10"><span class="absolute bottom-4 left-4 rounded-md border border-[#495057] bg-[#212529] px-2 py-1 text-sm leading-normal font-semibold text-[#dee2e6]">Grain on dusk</span></div>
</div></div>

CSS

/* Dark background patterns: low-opacity light ink on near-black grounds. Re-theme with the --bp-* properties. Each pattern is a utility; pass colours and sizes as arbitrary properties, e.g. [--bp-color:#0d9488]. */
/* Dot grid: slate dots, small enough to stay quiet on navy */
@utility bp-dark-dots{
  position:relative;isolation:isolate;overflow:hidden;background:var(--bp-bg,#0f172a);
  &::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--bp-opacity,.45);background-image:radial-gradient(circle,var(--bp-color,#94a3b8) var(--bp-dot,1.2px),transparent calc(var(--bp-dot,1.2px) + .5px));background-size:var(--bp-size,20px) var(--bp-size,20px)}
}
/* Glow grid: indigo lines under a top glow, faded out with a mask */
@utility bp-glow-grid{
  position:relative;isolation:isolate;overflow:hidden;background:var(--bp-bg,radial-gradient(80% 60% at 50% 0%,#312e81,#0b0f19 70%));
  &::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--bp-opacity,.35);background-image:linear-gradient(var(--bp-color,#818cf8) var(--bp-line,1px),transparent var(--bp-line,1px)),linear-gradient(90deg,var(--bp-color,#818cf8) var(--bp-line,1px),transparent var(--bp-line,1px));background-size:var(--bp-size,32px) var(--bp-size,32px);-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
}
/* Fine hatch: hairline diagonals at 8% */
@utility bp-hatch{
  position:relative;isolation:isolate;overflow:hidden;background:var(--bp-bg,#111827);
  &::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--bp-opacity,.08);background-image:repeating-linear-gradient(135deg,var(--bp-color,#e5e7eb) 0 var(--bp-line,1px),transparent var(--bp-line,1px) var(--bp-size,10px))}
}
/* Night mesh: the corner mesh in deep jewel tones on near-black */
@utility bp-night-mesh{
  position:relative;isolation:isolate;overflow:hidden;background:var(--bp-bg,#020617);
  &::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--bp-opacity,.7);background-image:radial-gradient(var(--bp-size,75%) var(--bp-size,75%) at 0% 0%,var(--bp-c1,#4338ca),transparent 70%),radial-gradient(var(--bp-size,75%) var(--bp-size,75%) at 100% 0%,var(--bp-c2,#0e7490),transparent 70%),radial-gradient(var(--bp-size,75%) var(--bp-size,75%) at 100% 100%,var(--bp-c3,#7e22ce),transparent 70%),radial-gradient(var(--bp-size,75%) var(--bp-size,75%) at 0% 100%,var(--bp-c4,#be185d),transparent 70%)}
}
/* Contour lines: the topography drawing as a cyan mask */
@utility bp-dark-topo{
  position:relative;isolation:isolate;overflow:hidden;background:var(--bp-bg,#0b1120);--bp-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><path d='M102.2 92C102.3 93.1 101.9 94.4 101.4 95.4C100.8 96.4 99.8 97.2 98.9 97.8C98 98.4 97 98.8 96.1 99C95.1 99.2 94.1 99 93.2 99.1C92.4 99.1 91.7 99.1 90.7 99.4C89.7 99.6 88.3 100.6 87 100.6C85.8 100.6 83.8 100.4 83 99.5C82.2 98.7 81.9 96.9 82 95.6C82.1 94.4 83.1 93 83.6 92C84.1 91 84.5 90.2 84.9 89.4C85.4 88.6 85.7 87.9 86.2 87.1C86.7 86.4 87.2 85.6 87.9 84.8C88.5 84 89.3 82.9 90.3 82.4C91.3 81.9 92.8 81.4 93.8 81.7C94.9 82 95.8 83.2 96.5 84.1C97.2 85 97.4 86.1 98 87C98.6 87.8 99.6 88.2 100.3 89C100.9 89.8 102 90.9 102.2 92ZM117.9 90.8C118.3 93.4 117.3 96.6 116 99C114.7 101.3 112.2 103.2 110.1 104.7C108 106.1 105.5 107.1 103.3 107.6C101 108.1 98.7 107.5 96.6 107.7C94.4 107.8 93 107.9 90.5 108.5C88 109.1 84.8 111.3 81.8 111.3C78.7 111.4 74.1 110.8 72.1 108.8C70.1 106.8 69.5 102.5 69.7 99.5C69.9 96.5 72.3 93.3 73.5 90.8C74.6 88.3 75.7 86.6 76.8 84.7C77.8 82.7 78.6 81 79.7 79.1C80.9 77.3 82.1 75.5 83.7 73.7C85.3 71.8 87.2 69.1 89.5 67.8C91.9 66.6 95.5 65.5 97.9 66.2C100.4 66.9 102.8 69.9 104.5 72C106.1 74.1 106.5 76.8 108 78.7C109.4 80.7 111.7 81.6 113.3 83.6C115 85.6 117.4 88.2 117.9 90.8ZM133.6 89.6C134.3 93.6 132.7 98.8 130.6 102.5C128.6 106.1 124.7 109.2 121.3 111.5C118 113.8 114.1 115.4 110.5 116.1C107 116.9 103.3 116 99.9 116.3C96.5 116.5 94.2 116.6 90.3 117.5C86.4 118.5 81.3 122 76.5 122C71.6 122.1 64.4 121.2 61.2 118.1C58.1 115 57.1 108.1 57.4 103.3C57.8 98.6 61.5 93.5 63.3 89.6C65.2 85.7 66.9 83 68.6 79.9C70.2 76.8 71.4 74.1 73.2 71.2C75.1 68.3 77 65.5 79.6 62.5C82.1 59.5 85 55.2 88.8 53.3C92.5 51.3 98.1 49.6 102.1 50.7C106 51.8 109.7 56.5 112.4 59.8C115 63.1 115.6 67.5 117.9 70.5C120.3 73.6 123.8 75.1 126.4 78.3C129 81.4 132.9 85.6 133.6 89.6ZM149.3 88.4C150.2 93.9 148 101 145.2 106C142.4 111 137.1 115.3 132.5 118.4C127.9 121.5 122.6 123.6 117.8 124.7C112.9 125.8 107.8 124.6 103.2 124.9C98.6 125.2 95.4 125.3 90.1 126.6C84.7 127.9 77.8 132.6 71.2 132.8C64.6 132.9 54.7 131.6 50.4 127.4C46 123.1 44.7 113.7 45.2 107.2C45.6 100.7 50.7 93.7 53.2 88.4C55.8 83.1 58.1 79.3 60.4 75.1C62.6 70.9 64.3 67.2 66.8 63.2C69.3 59.2 71.9 55.4 75.4 51.3C78.9 47.2 82.9 41.4 88 38.7C93.2 36 100.8 33.7 106.2 35.2C111.6 36.7 116.7 43.2 120.3 47.7C123.9 52.2 124.7 58.1 127.9 62.3C131.1 66.5 135.9 68.5 139.4 72.9C143 77.2 148.3 82.9 149.3 88.4ZM165 87.2C166.2 94.2 163.4 103.2 159.9 109.6C156.3 115.9 149.5 121.3 143.7 125.2C137.9 129.2 131.2 131.9 125 133.3C118.8 134.6 112.4 133.1 106.6 133.5C100.7 133.9 96.6 134 89.9 135.7C83.1 137.3 74.3 143.3 65.9 143.5C57.5 143.7 45 142.1 39.5 136.6C34 131.2 32.3 119.3 32.9 111C33.5 102.8 39.9 94 43.1 87.2C46.3 80.4 49.3 75.7 52.2 70.4C55 65 57.1 60.3 60.3 55.2C63.5 50.2 66.7 45.3 71.2 40.2C75.7 35 80.8 27.6 87.3 24.2C93.8 20.7 103.5 17.8 110.3 19.7C117.1 21.6 123.6 29.8 128.2 35.6C132.8 41.3 133.8 48.8 137.8 54.1C141.9 59.4 148 62 152.5 67.5C157 73 163.7 80.2 165 87.2ZM247.5 232C247.3 233.2 245.9 234.5 244.9 235.2C243.9 236 242.3 236 241.4 236.5C240.5 237 240.2 237.4 239.5 238.1C238.9 238.8 238.4 240 237.5 240.5C236.6 241.1 235.4 241.4 234.3 241.4C233.3 241.4 232 241.1 231.1 240.5C230.1 240 229.1 239.2 228.5 238.3C228 237.3 227.9 236 227.8 235C227.7 233.9 228.1 233 228 232C227.9 231 227.3 230 227.3 228.8C227.3 227.7 227.2 226.1 227.9 225.2C228.5 224.3 230 223.8 231.2 223.6C232.3 223.5 233.6 224.2 234.7 224.4C235.7 224.6 236.4 224.7 237.3 224.9C238.1 225 239 224.9 240 225.1C240.9 225.3 242 225.6 243 226.1C244 226.7 245.4 227.3 246.2 228.3C246.9 229.3 247.7 230.8 247.5 232ZM265 230.8C264.5 233.6 261.3 236.8 258.9 238.6C256.5 240.4 252.6 240.5 250.5 241.6C248.3 242.8 247.6 243.8 246 245.4C244.5 247 243.2 249.8 241.2 251.1C239.1 252.4 236.2 253.3 233.6 253.3C231.1 253.3 228.2 252.4 225.8 251.2C223.5 249.9 221.1 248 219.8 245.8C218.5 243.5 218.3 240.4 218 237.9C217.8 235.4 218.6 233.2 218.4 230.8C218.2 228.4 216.9 226 216.8 223.2C216.8 220.5 216.7 216.6 218.2 214.5C219.7 212.5 223.4 211.2 226.1 210.8C228.8 210.5 232 212.1 234.4 212.6C236.8 213.1 238.5 213.4 240.6 213.7C242.7 214 244.8 213.8 247.1 214.3C249.4 214.8 251.9 215.5 254.3 216.8C256.8 218 260.1 219.6 261.9 221.9C263.7 224.3 265.5 228 265 230.8ZM282.5 229.6C281.7 234 276.7 239 272.9 241.9C269.1 244.7 263 244.9 259.6 246.7C256.2 248.5 255 250.2 252.5 252.7C250.1 255.2 248.1 259.7 244.9 261.7C241.6 263.8 237 265.2 232.9 265.2C228.9 265.2 224.3 263.8 220.6 261.8C217 259.8 213.1 256.7 211 253.2C209 249.8 208.6 244.8 208.3 240.9C207.9 236.9 209.2 233.5 208.9 229.6C208.6 225.7 206.4 221.9 206.4 217.7C206.3 213.4 206.1 207.1 208.5 203.9C211 200.6 216.7 198.5 221 198C225.2 197.5 230.3 200 234.1 200.8C238 201.6 240.6 202.2 244 202.6C247.3 203.1 250.6 202.8 254.2 203.6C257.8 204.4 261.8 205.4 265.7 207.4C269.6 209.4 274.8 211.9 277.7 215.6C280.5 219.3 283.3 225.2 282.5 229.6ZM300.1 228.4C299 234.4 292.1 241.3 286.9 245.2C281.7 249.1 273.3 249.3 268.7 251.8C264 254.3 262.4 256.5 259 260C255.7 263.4 253 269.5 248.5 272.4C244.1 275.2 237.8 277 232.2 277C226.7 277.1 220.4 275.2 215.4 272.4C210.4 269.7 205.1 265.5 202.3 260.7C199.4 256 199 249.2 198.5 243.8C198 238.4 199.8 233.7 199.3 228.4C198.9 223.1 196 217.9 195.9 212.1C195.8 206.2 195.5 197.7 198.9 193.2C202.2 188.7 210 185.9 215.9 185.2C221.7 184.5 228.6 188 233.9 189C239.1 190 242.7 190.9 247.3 191.5C251.9 192.1 256.4 191.7 261.4 192.8C266.3 193.9 271.6 195.3 277 198C282.3 200.8 289.5 204.2 293.4 209.3C297.2 214.3 301.1 222.4 300.1 228.4ZM317.6 227.2C316.2 234.8 307.5 243.5 300.9 248.5C294.2 253.4 283.7 253.7 277.8 256.9C271.9 260 269.8 262.9 265.5 267.3C261.3 271.6 257.9 279.4 252.2 283C246.6 286.6 238.5 288.9 231.5 288.9C224.5 288.9 216.5 286.5 210.1 283.1C203.8 279.6 197.1 274.3 193.5 268.2C189.9 262.2 189.3 253.6 188.7 246.7C188.1 239.9 190.3 233.9 189.8 227.2C189.3 220.5 185.5 213.9 185.4 206.5C185.3 199 185 188.2 189.2 182.6C193.4 176.9 203.4 173.3 210.8 172.4C218.2 171.5 226.9 175.9 233.6 177.2C240.2 178.5 244.8 179.6 250.7 180.4C256.5 181.2 262.2 180.6 268.5 182C274.8 183.4 281.5 185.2 288.3 188.7C295.1 192.2 304.3 196.5 309.1 202.9C314 209.3 319 219.6 317.6 227.2ZM259.9 74C260 75 259.7 76.5 259 77.3C258.4 78.1 256.8 78.5 255.9 79C255 79.4 254.3 79.6 253.6 80.2C252.8 80.8 252.4 82 251.5 82.7C250.6 83.4 249.3 84.3 248.2 84.4C247 84.5 245.6 84 244.6 83.3C243.6 82.7 242.6 81.6 242.2 80.6C241.7 79.5 241.7 78.1 241.9 77C242 75.9 243 74.9 243.3 74C243.6 73.1 243.7 72.7 243.6 71.7C243.5 70.7 242.8 69.2 242.9 68.1C243.1 66.9 243.7 65.3 244.6 64.6C245.5 63.9 247.1 63.9 248.2 64C249.4 64.1 250.6 64.7 251.6 65.1C252.6 65.5 253.5 65.9 254.3 66.5C255.1 67.1 255.8 67.9 256.4 68.6C257.1 69.4 257.7 70.1 258.3 71C258.9 71.9 259.8 73 259.9 74ZM275.3 72.8C275.5 75.3 274.7 78.7 273.1 80.6C271.6 82.6 267.9 83.5 265.7 84.6C263.5 85.8 261.9 86.1 260.1 87.6C258.4 89.1 257.4 92 255.3 93.7C253.1 95.4 250 97.4 247.2 97.6C244.5 97.8 241.1 96.6 238.7 95.1C236.3 93.6 234 91 232.9 88.5C231.8 85.9 231.7 82.5 232.2 79.9C232.6 77.3 234.9 74.9 235.6 72.8C236.3 70.7 236.5 69.6 236.3 67.2C236.2 64.9 234.3 61.4 234.7 58.6C235.1 55.8 236.5 52 238.7 50.4C240.8 48.8 244.6 48.8 247.4 49C250.2 49.1 252.9 50.5 255.4 51.5C257.8 52.5 260 53.5 261.9 55C263.8 56.4 265.4 58.2 266.9 59.9C268.5 61.7 270 63.5 271.4 65.6C272.8 67.7 275 70.3 275.3 72.8ZM290.6 71.6C291.1 75.6 289.8 80.9 287.3 84C284.8 87.1 278.9 88.5 275.5 90.3C272.1 92.1 269.4 92.6 266.7 95C263.9 97.4 262.4 102 259 104.6C255.6 107.3 250.7 110.4 246.3 110.8C241.9 111.2 236.6 109.3 232.8 106.9C229.1 104.5 225.4 100.4 223.7 96.4C221.9 92.4 221.8 86.9 222.5 82.8C223.2 78.7 226.8 74.9 227.9 71.6C229 68.3 229.3 66.5 229.1 62.8C228.8 59.1 225.9 53.6 226.5 49.2C227.1 44.7 229.4 38.7 232.7 36.2C236.1 33.6 242.2 33.6 246.6 33.9C250.9 34.2 255.3 36.3 259.1 37.9C263 39.5 266.4 41.2 269.5 43.4C272.5 45.6 274.9 48.4 277.4 51.3C279.9 54.1 282.3 56.8 284.5 60.2C286.7 63.6 290.1 67.6 290.6 71.6ZM84.1 250C84.1 251.1 83.3 252.3 82.7 253.2C82.1 254.1 81.3 254.8 80.5 255.4C79.6 256 78.7 256.4 77.9 256.7C77 257 76.2 256.9 75.3 257.3C74.4 257.6 73.6 258.3 72.5 258.8C71.3 259.2 69.6 260 68.4 259.8C67.2 259.5 65.7 258.4 65.3 257.3C64.8 256.2 65.2 254.3 65.4 253.1C65.7 251.9 66.3 250.9 66.6 250C66.9 249.1 66.9 248.3 67.1 247.5C67.3 246.6 67.5 245.8 67.9 244.9C68.3 244 68.7 242.9 69.4 242C70.1 241.1 71.1 239.9 72.2 239.6C73.2 239.3 74.8 239.5 75.8 240C76.8 240.6 77.4 242 78.2 242.8C78.9 243.6 79.3 244.2 80.1 244.9C80.9 245.5 82.2 245.9 82.9 246.8C83.5 247.6 84.1 248.9 84.1 250ZM99.7 248.8C99.6 251.4 97.9 254.2 96.4 256.4C95 258.5 93 260.3 91 261.7C89.1 263.1 86.9 264 84.8 264.8C82.8 265.5 80.8 265.4 78.7 266.2C76.5 267 74.7 268.7 71.9 269.7C69.2 270.7 65 272.7 62.1 272.1C59.3 271.6 55.9 269 54.7 266.3C53.5 263.7 54.6 259.2 55.1 256.3C55.7 253.3 57.3 251 57.9 248.8C58.6 246.6 58.6 244.9 59.2 242.8C59.7 240.8 60.1 238.7 61 236.6C61.9 234.4 62.9 231.8 64.6 229.7C66.3 227.6 68.7 224.7 71.2 223.9C73.8 223.2 77.4 223.7 79.8 225C82.2 226.3 83.8 229.7 85.5 231.6C87.3 233.5 88.4 234.9 90.2 236.5C92.1 238.1 95.3 239 96.8 241.1C98.4 243.1 99.8 246.2 99.7 248.8ZM115.3 247.6C115.2 251.6 112.5 256.2 110.2 259.6C107.9 263 104.7 265.9 101.6 268.1C98.5 270.3 95 271.6 91.8 272.8C88.5 274 85.5 273.8 82.1 275.1C78.7 276.5 75.7 279.1 71.4 280.7C67 282.3 60.4 285.4 55.9 284.5C51.3 283.6 46 279.5 44.2 275.3C42.3 271.1 44 264 44.8 259.4C45.7 254.8 48.2 251.1 49.3 247.6C50.3 244.1 50.4 241.4 51.2 238.1C52 234.9 52.7 231.7 54.1 228.2C55.6 224.8 57.1 220.7 59.8 217.4C62.5 214.1 66.3 209.5 70.3 208.3C74.3 207.1 80.1 207.9 83.8 209.9C87.6 212 90.1 217.4 92.9 220.4C95.6 223.5 97.4 225.7 100.4 228.2C103.3 230.7 108.3 232.1 110.8 235.4C113.3 238.6 115.4 243.6 115.3 247.6Z' fill='none' stroke='%23000' stroke-width='1.4'/></svg>");
  &::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--bp-opacity,.24);background-color:var(--bp-color,#22d3ee);-webkit-mask:var(--bp-svg) 0 0/var(--bp-size,240px) repeat;mask:var(--bp-svg) 0 0/var(--bp-size,240px) repeat}
}
/* Grain on dusk: white noise at 12% over a dark gradient, which hides banding */
@utility bp-dusk-grain{
  position:relative;isolation:isolate;overflow:hidden;background:var(--bp-bg,linear-gradient(160deg,#1e1b4b,#0f172a 60%,#042f2e));--bp-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  &::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:var(--bp-opacity,.12);background-color:var(--bp-color,#fff);-webkit-mask:var(--bp-svg) 0 0/var(--bp-size,140px) repeat;mask:var(--bp-svg) 0 0/var(--bp-size,140px) repeat}
}

About this set

Six patterns tuned for dark interfaces, where a light-theme pattern either vanishes or turns into noise. Dot grid uses small slate dots at 45 percent on navy. Glow grid puts indigo lines under a glow from the top edge and fades them out with a linear mask, a common look for developer tool and AI product heroes. Fine hatch is hairline diagonals at 8 percent, enough to give a surface texture without distracting. Night mesh is the four-corner mesh in deep indigo, teal, violet and magenta on near-black. Contour lines reuses the topography drawing as a cyan mask at low opacity, and Grain on dusk lays white noise at 12 percent over an indigo to teal gradient, which also hides the banding that dark gradients often show. The rule of thumb in every pattern is light ink at low opacity on a dark ground, never a dark pattern on a dark ground. Name chips use Bootstrap’s dark body colours, and the Bootstrap version sets data-bs-theme=”dark” so its own components match. Use them behind dark dashboards, code editors, terminal-style pages and dark landing pages.

What’s included

Dot grid, glow grid, fine hatch, night mesh, contour lines, grain on dusk
Light ink at low opacity on near-black grounds
Glow grid faded out with a mask-image gradient
Bootstrap version runs under data-bs-theme="dark"
Plain CSS, Bootstrap 5 and Tailwind CSS 4 versions of the same design

Accessibility

The patterns are decorative backgrounds and need no alt text. Name chips are opaque dark chips with light text well above 4.5:1, and the grey group captions reach 4.5:1 on the dark page. Nothing animates and there are no interactive controls.

Customise it

Change --bp-color, --bp-bg, --bp-size and --bp-opacity on each pattern, plus --bp-c1 to --bp-c4 for the night mesh. In Bootstrap they work unchanged under data-bs-theme="dark"; in Tailwind pass them as arbitrary properties on bp-dark-dots, bp-glow-grid or bp-night-mesh.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Background Patterns