Skip to content

Instantly share code, notes, and snippets.

@thisisishara

thisisishara/dots_are_cool.html

Created July 13, 2023 04:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thisisishara/05b1b64f5e0df0340779a61bea6f0924 to your computer and use it in GitHub Desktop.
Save thisisishara/05b1b64f5e0df0340779a61bea6f0924 to your computer and use it in GitHub Desktop.
Download ZIP
Create a really clean pure CSS dot-pattern background. Live demo available @ https://thisisishara.github.io/dots-are-cool/
Raw
dots_are_cool.html
<!DOCTYPE html>
<html>
<head>
<title>Cool Dots </title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit&display=swap">
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #17202A;
}
.dot-matrix {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: radial-gradient(#212F3D 5%, transparent 7%);
background-position: 0 0;
background-size: 1.8rem 1.8rem;
z-index: -1;
}
h1 {
font-size: 3rem;
color: #273746;
font-family: 'Outfit', Arial, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="dot-matrix"></div>
<h1>Dots are cool</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment