5+ CSS Circle Background Examples

This post contains a total of 5+ CSS Circle Background Examples with Source Code. All these Circle Backgrounds are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Circle Background Examples

1. By Geert-Jan Hendriks

Made by Geert-Jan Hendriks. CSS3 Eyes pattern. Source

CSS Circle Background by Geert Jan Hendriks
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html{
	height: 100%;	
}
body{
	background-color: #59bfff;
	background-size: 120px 120px;			
	background-image:  
					radial-gradient(white 2px, transparent 3px),
					  radial-gradient(black 8px, transparent 9px),
					  radial-gradient(#59bfff 12px, transparent 13px),
					  radial-gradient(white 25px, transparent 26px);			   
}
</style>
</head>
<body>
</body>
</html>

2. By Steve Hudek

Made by Steve Hudek. Simple Circle Background Patterns. Source

CSS Circle Background by Steve Hudek
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html {
height: 100%;
background:
	repeating-radial-gradient(
		circle,
		transparent,
		transparent 3.5em,
		tomato 3.5em,
		tomato 4.5em
	),
	repeating-radial-gradient(
		circle,
		transparent,
		transparent 3.5em,
		dodgerblue 3.5em,
		dodgerblue 4.5em
	),
	repeating-radial-gradient(
		circle,
		transparent,
		transparent 2.5em,
		gold 2.5em,
		gold 2.75em
	), floralwhite;

background-blend-mode: multiply;
background-size: 10em 10em;
background-position:
	0 0,
	5em 5em,
	10em 5em;
}
</style>
</head>
<body>
</body>
</html>

3. By G V TANISH VETTRIVEL

Made by G V TANISH VETTRIVEL. Half Circle Background Pattern. Source

CSS Circle Background by G V Tanish Vettrivel
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body{
    padding: 0;
    margin: 0;
    background-color: #f7a800;
    background-size: 56px 56px;
    background-image:
    linear-gradient(
        135deg,
        transparent 55%,
        #f7a800 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>
    <title></title> 
</head>
<body>
</body>
</html>

4. By yoksel

Made by yoksel. Simple Circles. Source

CSS Circle Background by yoksel
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
HTML {
  height: 100%;
  font-size: 10px;  
  }

BODY {
  background: radial-gradient(4rem,
    rgba(255,255,255,0) 80%, 
    #778691 80%, #778691 99%, 
    rgba(255,255,255, 0) 
    ) 0 0,
    radial-gradient(4rem,
    rgba(255,255,255,0) 80%, 
    #778691 80%, #778691 99%,  
    rgba(255,255,255, 0) 
    ) 4em 4em,
    radial-gradient(4.7rem,
    rgba(255,255,255,0) 50%, 
    #B1C2B3 50%,
    #B1C2B3 75%, #B1C2B3 99%, 
    rgba(255,255,255, 0) 
    ) 4em 4em,
    radial-gradient(4.7rem,
    rgba(255,255,255,0) 50%, 
    #B1C2B3 50%,
    #F5FCD0 75%, #B1C2B3 99%, 
    rgba(255,255,255, 0) 
    ) 0 0;
  background-size: 8rem 8rem;
  background-color: #F5FCD0;
  }
</style>
</head>
<body>
</body>
</html>

5. By Ana Tudor

Made by Ana Tudor. Pure CSS halftone pattern. Source

CSS Circle Background by Ana Tudor
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
div {
  position: relative;
  height: 90vh;
  box-shadow: 2px 2px 5px;
  background: #fff;
  filter: contrast(7);
  --mask: linear-gradient(red, rgba(0, 0, 0, 0.45));
}
div::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(#000, transparent) 0 0/1em 1em space;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  content: "";
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

6. By G V TANISH VETTRIVEL

Another CSS Circle Background Pattern by G V TANISH VETTRIVEL. Source

CSS Circle Background by GV Tanish Vettrivel
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></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>
</body>
</html>