Hello Viewer, Here you’ll Find Code 3 Amazing Background Patterns With Pure CSS and now I’m going to create a Amazing Background Patterns With Pure CSS.
Background Patterns 1 -
CODE -
<!DOCTYPE html>
<html>
<head>
<title>Background Pattern 1</title>
<style>
body{
padding: 0;
margin: 0;
background-color:navy;
background-size: 53px 100px;
background-image: radial-gradient(
transparent 28px,
#ffffff 28px,
#ffffff 32px,
transparent 32px
);
}
</style>
</head>
<body>
</body>
</html>
Background Patterns 2 -
CODE -
<!DOCTYPE html>
<html>
<head>
<title>Background Pattern 2</title>
<style>
body{
padding: 0;
margin: 0;
background-color: #f70b45;
background-size: 48px 48px;
background-image: radial-gradient(
transparent 20px,
#ffffff 20px,
#ffffff 24px,
transparent 24px
),
radial-gradient(
transparent 20px,
#ffffff 20px,
#ffffff 24px,
transparent 24px
);
background-position: 0 0 , 24px 24px;
}
</style>
</head>
<body>
</body>
</html>
Background Patterns 3 -
CODE -
<!DOCTYPE html>
<html>
<head>
<title>Background Pattern 3</title>
<style>
body{
padding: 0;
margin: 0;
background-color: green;
background-size: 56px 56px;
background-image:
linear-gradient(
135deg,
transparent 55%,
green 55%
),
radial-gradient(
transparent 6px,
#ffffff 6px,
#ffffff 10px,
transparent 10px,
transparent 15px,
#ffffff 15px,
#ffffff 19px,
transparent 19px,
transparent 24px,
#ffffff 24px,
#ffffff 28px,
transparent 28px
);
}
</style>
</head>
<body>
</body>
</html>
0 Comments