Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- https://css-challenges.com/conic-gradient-patterns/ -->
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
              
            
!

CSS

              
                .box {
  margin:5px;
  height:300px;
  background: 0 0/50px 50px;
  border:1px solid;
}
.box:nth-child(1) {
  background:repeating-conic-gradient(transparent 0 0.25turn,#c39f76 0.25turn 0.5turn) 0/100px 100px;
}
.box:nth-child(2) {
  background:repeating-conic-gradient(at 70% 50%,transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg) 30px 0/100px 100px;
}
.box:nth-child(3) {
  background:
    repeating-conic-gradient(transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg),
    repeating-conic-gradient(transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg) 0 50px;
  background-size:100px 100px;
}
.box:nth-child(4) {
  background:
    repeating-conic-gradient(transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg) ,
    repeating-conic-gradient(transparent 0 60deg,#c39f76 61deg 120deg,transparent 121deg 180deg) 50px 50px;
  background-size:100px 100px;
}
.box:nth-child(5) {
  background:conic-gradient(at left center,transparent 0 63.4deg,#c39f76 64deg 116.6deg,transparent 117deg) 0 /100px 100px;
}
.box:nth-child(6) {
  background:conic-gradient(at 0% 50% ,transparent 0 63.4deg,#c39f76 64deg 90deg,transparent 90deg),
             conic-gradient(from 180deg at 100% 50% ,transparent 0 63.4deg,#c39f76 64deg 90deg,transparent 90deg) ;
  background-size:100px 100px;
}
.box:nth-child(7) {
  background:repeating-conic-gradient(#c39f76 0 30deg,transparent 31deg 60deg,#c39f76 61deg 90deg) 50px 50px/100px 100px;
}
.box:nth-child(8) {
  background:
    conic-gradient(from 58deg  at 72% 60% ,#fff 1deg 108deg ,transparent 109deg),
    conic-gradient(from 126deg at 50% 77% ,#fff 1deg 108deg ,transparent 109deg),
    conic-gradient(from 162deg at 50% 0   ,#c39f76 1deg 36deg,transparent 37deg),
    conic-gradient(from 90deg  at 0% 40%  ,#c39f76 1deg 36deg,transparent 37deg);
  background-size:100px 100px;
}
.box:nth-child(9) {
  background:
    conic-gradient(from 90deg at 50% 40%,transparent 1deg 50deg,#fff 51deg 129deg,transparent 130deg),
    conic-gradient(from 90deg at 50% 0  ,transparent 1deg 50deg,#c39f76 51deg 129deg,transparent 130deg);
  background-size:100px 100px;
}
.box:nth-child(10) {
  background:
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) 0   0,
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) -20px 33.33px,
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) -30px 66.66px;
  background-size:100px 100px;
}
.box:nth-child(11) {
  background:
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) 0   0,
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) 33.33px 33.33px,
     conic-gradient(from -90deg at 33.33% 33.33%,#c39f76 0 90deg,transparent 0) 66.66px 66.66px;
  background-size:100px 100px;
}

              
            
!

JS

              
                // https://css-challenges.com/conic-gradient-patterns/ 
              
            
!
999px

Console