.checker {
    background:
        linear-gradient(45deg, #333 25%, transparent 25%),
        linear-gradient(-45deg, #333 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #333 75%),
        linear-gradient(-45deg, transparent 75%, #333 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

.stripes {
    background: repeating-linear-gradient(45deg,
            #ffcc00 0px,
            #ffcc00 15px,
            #333 15px,
            #333 30px);
}

.dots {
    background: radial-gradient(circle, #000000 20%, transparent 21%);
    background-size: 30px 30px;
}

.hex {
    background:
        linear-gradient(30deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%),
        linear-gradient(150deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%),
        linear-gradient(90deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%);
    background-size: 40px 70px;
}

.wave-lines {
    background: repeating-linear-gradient(45deg,
            #00ffcc 0,
            #00ffcc 10px,
            #000000 10px,
            #000000 20px);
    background-size: 100% 40px;
    position: relative;
}

.grid {
    background:
        linear-gradient(#000000 1px, transparent 1px),
        linear-gradient(90deg, #000000 1px, transparent 1px);
    background-size: 25px 25px;
}

.noise {
    background:
        repeating-radial-gradient(circle,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 3px);
}

.psycho {
    background: repeating-conic-gradient(from 0deg,
            #ff1744 0deg,
            #ff1744 15deg,
            #651fff 15deg,
            #651fff 30deg);
}

.waves {
    background:
        repeating-radial-gradient(circle at 0 0,
            rgba(128, 150, 136, 0.35) 0px,
            rgba(128, 150, 136, 0.35) 6px,
            transparent 6px,
            transparent 12px),
        repeating-radial-gradient(circle at 100% 100%,
            rgba(128, 81, 181, 0.35) 0px,
            rgba(128, 81, 181, 0.35) 6px,
            transparent 6px,
            transparent 12px);
}

.blotchy {
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.15), transparent 60%),
        radial-gradient(circle at 70% 40%, rgba(0, 0, 0, 0.12), transparent 55%),
        radial-gradient(circle at 40% 80%, rgba(0, 0, 0, 0.1), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.08), transparent 65%);
}

.grunge {
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 0, 0, 0.18), transparent 50%),
        radial-gradient(circle at 60% 30%, rgba(0, 0, 0, 0.14), transparent 55%),
        radial-gradient(circle at 35% 70%, rgba(0, 0, 0, 0.12), transparent 60%),
        radial-gradient(circle at 80% 60%, rgba(0, 0, 0, 0.1), transparent 65%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.08), transparent 70%);
}

.ink {
    background:
        radial-gradient(circle at 30% 40%, rgba(63, 81, 181, 0.25), transparent 65%),
        radial-gradient(circle at 70% 60%, rgba(156, 39, 176, 0.22), transparent 70%),
        radial-gradient(circle at 50% 20%, rgba(233, 30, 99, 0.18), transparent 60%);
}

.clouds-heavy {
    background:
        radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.9), transparent 55%),
        radial-gradient(circle at 55% 30%, rgba(255, 255, 255, 0.85), transparent 60%),
        radial-gradient(circle at 75% 40%, rgba(255, 255, 255, 0.9), transparent 55%),
        radial-gradient(circle at 40% 65%, rgba(255, 255, 255, 0.8), transparent 65%),
        radial-gradient(circle at 65% 70%, rgba(255, 255, 255, 0.85), transparent 70%),
        linear-gradient(to bottom,
            #5bb6ff 0%,
            #9ed8ff 50%,
            #e6f6ff 100%);
}

.wave-conic {
    background:
        repeating-conic-gradient(from 0deg,
            #651fff 0deg 15deg,
            transparent 15deg 30deg);
    background-size: 40px 40px;
}