csssecrets

/**
 * Conic gradients test
 * PASS if green gradient, FAIL if red.
 */

background: red;
background: conic-gradient(limegreen, green, limegreen);
min-height: 100%;

csssecrets

/**
 * Test: color stops with two locations
 * PASS if green stripes, FAIL if red
 */

background: red;
background: repeating-linear-gradient(-45deg, limegreen 0 20px, green 20px 60px);
min-height: 100%;

csssecrets

/**
 * Basic border-image demo
 */

div {
	border: 40px solid transparent;
	border-image: 33.334% url('data:image/svg+xml,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30"> \
	                      <circle cx="5" cy="5" r="5" fill="%23ab4"%2F><circle cx="15" cy="5" r="5" fill=" %23655"%2F> \
	                      <circle cx="25" cy="5" r="5" fill="%23e07"%2F><circle cx="5" cy="15" r="5" fill=" %23655"%2F> \
	                      <circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"%2F> \

csssecrets

/**
 * Footnote-style border
 */

.footnote {
	border-top: .15em solid transparent;
	border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
	padding-top: .5em;
	font: 220%/1.4 Baskerville, Palatino, serif;
}

csssecrets

/**
 * Marching ants border
 */
 
@keyframes ants { to { background-position: 100% 100% } }

div {
	padding: 1em;
	border: 1px solid transparent;
	background: linear-gradient(white, white) padding-box,

csssecrets

/**
 * Continuous image borders
 */

div {
	border: 1em solid transparent;
	background: linear-gradient(white, white) padding-box,
	            url(http://csssecrets.io/images/stone-art.jpg) border-box  0 / cover;
	
	/* Styling & enable resize */

csssecrets

/**
 * Vintage envelope themed border via border-image
 */

div {
	padding: 1em;
	border: 16px solid transparent;
	border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
	              #58a 0, #58a 3em, transparent 0, transparent 4em);
	

csssecrets

/**
 * Vintage envelope themed border
 */

div {
	padding: 1em;
	border: 1em solid transparent;
	background: linear-gradient(white, white) padding-box,
	            repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, 
	              #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;

csssecrets

/**
 * Pseudorandom stripes
 */

background: hsl(20, 40%, 90%);
background-image: 
	linear-gradient(90deg, #fb3 11px, transparent 0),
	linear-gradient(90deg, #ab4 23px, transparent 0),
	linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;

csssecrets

/**
 * Checkerboard
 */

background: #eee;
background-image: 
	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
	linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;