Below are some background effects implemented using css:

Dotted background

The code:

.bg-dotted {
  background-image: radial-gradient(circle, var(--bg) 2px, transparent 2px);
  background-size: 15px 15px;
}

A gradient is created and filled with bg color up to 2px, then it becomes transparent, forming a small dot. Adjusting the background-size changes the spacing between the dots.

Diagonal Stripes

The code:

.bg-striped {
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-secondary),
    var(--bg-secondary) 10px,
    transparent 10px,
    transparent 20px
  );
}

The first 10px is filled with --bg-secondary, forming the stripe. From 10px to 20px, it’s transparent, creating the gap.

You can adjust the angle (45deg, to right, or to bottom) to control the direction of the stripes.

Grid background

The code:

.bg-grid {
  background-image: linear-gradient(
      to right,
      var(--bg-secondary) 1px,
      transparent 1px
    ), linear-gradient(to bottom, var(--bg-secondary) 1px, transparent 1px);
  background-size: 20px 20px;
}

Checker Board

The code:

.bg-checkerboard {
  background-image: linear-gradient(
      45deg,
      var(--bg-secondary) 25%,
      transparent 25%
    ), linear-gradient(-45deg, var(--bg-secondary) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-secondary) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-secondary) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

Diamond

The code:

.bg-diamond {
  background-image: linear-gradient(
      45deg,
      var(--bg-secondary) 25%,
      transparent 25%
    ), linear-gradient(-45deg, var(--bg-secondary) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-secondary) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-secondary) 75%);
  background-size: 30px 30px;
}

Paper

The code:

.bg-paper {
  background-color: #fff;
  opacity: 0.8;
  background-image: linear-gradient(var(--bg-secondary) 2px, transparent 2px),
    linear-gradient(90deg, var(--bg-secondary) 2px, transparent 2px),
    linear-gradient(var(--bg-secondary) 1px, transparent 1px), linear-gradient(90deg, var(
          --bg-secondary
        ) 1px, #fff 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

Cross

The code:

.bg-cross {
  background-color: #fff;
  opacity: 0.8;
  background: radial-gradient(
      circle,
      transparent 20%,
      #fff 20%,
      #fff 80%,
      transparent 80%,
      transparent
    ),
    radial-gradient(
        circle,
        transparent 20%,
        #fff 20%,
        #fff 80%,
        transparent 80%,
        transparent
      ) 25px 25px, linear-gradient(var(--bg-tertiary) 2px, transparent 2px) 0 -1px,
    linear-gradient(90deg, var(--bg-tertiary) 2px, #fff 2px) -1px 0;
  background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
}

---