Website Backgrounds

Click "Preview" to see a background live, or "Copy" to get the CSS Code.

/* Dark Grid BG */
.dark-grid-bg {
  position: relative;
  background-color: #020617; /* This is the color for bg-slate-950 */
  overflow: hidden;
}

.dark-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(79, 79, 79, 0.18) 1px, transparent 1px), 
                    linear-gradient(to bottom, rgba(79, 79, 79, 0.18) 1px, transparent 1px);
  background-size: 14px 24px;
  pointer-events: none;
}

/* Celestial Gradient BG */
.celestial-gradient-bg {
  position: relative;
  overflow: hidden;
}

.celestial-gradient-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(125% 125% at 50% 10%, #fff 40%, #6633ee 100%);
  pointer-events: none;
}

.radial-dots-bg {
  position: relative;
  background-color: white;
  overflow: hidden;
}

.radial-dots-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
  pointer-events: none;
}