snippetcssTip

10 beautiful CSS background patterns

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

patternsbeautifulcssbackground

Problem

MagicPattern has an amazing collection of beautiful pure CSS background pattern to spice up your designs. I highly recommend checking out the full collection. Meantime, here are my top picks to get you started:
<style>
.pattern-box {
grid-column: 1 / -1;
width: 100%;

Solution

.lines-2 {
  background-color: #fefefe;
  background-image: linear-gradient(
    to right,
    #5394fd,
    #5394fd 12px,
    #fefefe 12px,
    #fefefe
  );
  background-size: 24px 100%;
}

.pattern-box {
grid-column: 1 / -1;
width: 100%;
height: 144px;
border-radius: var(--layout-border-radius) var(--layout-border-radius) 0 0;
}

Code Snippets

.lines-2 {
  background-color: #fefefe;
  background-image: linear-gradient(
    to right,
    #5394fd,
    #5394fd 12px,
    #fefefe 12px,
    #fefefe
  );
  background-size: 24px 100%;
}

.zigzag {
  background-color: #fefefe;
  background-image: linear-gradient(135deg, #5394fd 25%, transparent 25%),
    linear-gradient(225deg, #5394fd 25%, transparent 25%),
    linear-gradient(45deg, #5394fd 25%, transparent 25%),
    linear-gradient(315deg, #5394fd 25%, #fefefe 25%);
  background-position:
    24px 0,
    24px 0,
    0 0,
    0 0;
  background-size: 48px 48px;
  background-repeat: repeat;
}

.polka {
  background-color: #fefefe;
  background-image: radial-gradient(#5394fd 1.2px, #fefefe 1.2px);
  background-size: 24px 24px;
}

Context

From 30-seconds-of-code: 10-css-background-patterns

Revisions (0)

No revisions yet.