Circular Background Patterns

You can use radial-gradient() to render circular background patterns. This page contains examples of various circular patterns that can be acheived with this method.

<style scoped>
.pattern {min-height:200px;}

#circular1 {
background-color:#ccc;
background-image: radial-gradient(#eee 15%, transparent 15%),
radial-gradient(#eee 40%, transparent 40%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;
}
</style>

<div id="circular1" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#circular2 {
background-color:#ccc;
background-image: radial-gradient(#eee 15%, transparent 15%),
radial-gradient(#eee 70%, transparent 70%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;
}
</style>

<div id="circular2" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#circular3 {
background: repeating-radial-gradient(closest-side at 15px 25px, #ccc 15%, #eee 40%);
}
</style>

<div id="circular3" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#circular4 {
background: radial-gradient(#fff, #ccc);
}
</style>

<div id="circular4" class="pattern">
<h2>Gradient stretches to edges</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#circular5 {
background: radial-gradient(circle, #fff, #ccc);
}
</style>

<div id="circular5" class="pattern">
<h2>Circle &mdash; Gradient is constrained to a circle</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#circular6 {
background: repeating-radial-gradient(closest-side at 15px 25px, #ccc 15%, #eee 40%);
background-size:60px 60px;
}
</style>

<div id="circular6" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#circular7 {
background: repeating-radial-gradient(closest-side at 25px 35px, #ccc 15%, #eee 40%);
background-size:60px 60px;
}
</style>

<div id="circular7" class="pattern">
<h2>Sample text</h2>
</div>

<style scoped>
.pattern {min-height:200px;}

#circular11 {
background-color:#ccc;
background-image: radial-gradient(#eee 15%, transparent 15%),
radial-gradient(#eee 15%, transparent 60%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;
}
</style>

<div id="circular11" class="pattern">
<h2>Sample text</h2>
</div>

Feel free to copy/paste the above code and make any modifications you wish.

Qhmit.com

Circular Background Patterns

Related