/ Background Patterns

Circles Pattern

Circles Pattern

Circles Pattern

A Circles BACKGROUND PATTERNS.

Made with

Html
Css

Author

yoksel

Css

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;
  }

Demo

See the Pen Circles by yoksel (@yoksel) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More