CSS Graph Paper Background

Nice and dark graph for printing graph paper. May need to adjust the 4th parameter of the rgba function to make the lines lighter.

body {
    background:
        linear-gradient(-90deg, rgba(0, 0, 0, 1.03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, 1.03) 1px, transparent 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, 1.03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, 1.03) 1px, transparent 1px),
        linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(-90deg, transparent 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(transparent 1px, transparent 1px), transparent;
    background-size:
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px;
} 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.