CodePen Embed - 1 element card background patterns (see description)

.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card
.card

View Compiled

$w: 13em;
$h: 19em;
$f: $h/$w;
$n: 7;
$g: 1em;
$c0: #ff9528;
$c1: #3f7ea6;

@function int_ch($ch0, $ch1) {
	@return calc(
		var(--i)*#{$ch1} + var(--noti)*#{$ch0})
}

@function int_col($c0, $c1) {
	$ch: 'red' 'green' 'blue';
	$n: length($ch);
	$args: ();
	
	@each $fn in $ch {
		$args: $args, int_ch(call($fn, $c0), call($fn, $c1))
	}
	
	@return RGB(#{$args})
}

body {
	--sqrt2: 1.41421356237;
	--h: #{$f*$w};
	display: grid;
	grid-template-columns: repeat(var(--n, #{$n}), var(--w, #{$w}));
	grid-gap: $g;
	place-content: center;
	margin: 0;
	padding: 2vmin;
	min-width: $w;
	min-height: 100vh;
	background: #333;
	
	@for $i from 1 to $n {
		@media (max-width: ($n - $i + 1)*$w + ($n - $i + 2)*$g) {
			--n: #{$n - $i}
		}
	}
}

.card {	
	overflow: hidden;
	position: relative;
	width: var(--w, #{$w});
	height: var(--h, #{$h});
	border-radius: .5em;
	box-shadow: 2px 2px 17px #000;
	background: linear-gradient(var(--ang, 180deg), $c0, $c1);
	
	&, &:before, &:after {
		--strip-stop: 100%;
		--strip-f: .25;
		--strip-stop-0: calc(var(--strip-f)*var(--strip-stop));
		--strip-stop-1: calc(var(--strip-stop) - var(--strip-stop-0));
		--strip-end: red;
		--strip-mid: transparent;
		--strip-list:
			var(--strip-end) 0,
			var(--strip-end) var(--strip-stop-0), 
			var(--strip-mid) 0, 
			var(--strip-mid) var(--strip-stop-1), 
			var(--strip-end) 0, 
			var(--strip-end) var(--strip-stop);
		--joint-list: 
			var(--joint-end, red) var(--joint-stop, 25%), 
			var(--joint-mid, transparent) 0;
		--joint-0: 
			linear-gradient(135deg, var(--joint-list));
		--joint-1: 
			linear-gradient(-135deg, var(--joint-list));
		--joint-2:
			linear-gradient(-45deg, var(--joint-list));
		--joint-3: 
			linear-gradient(45deg, var(--joint-list));
	}
	
	&:before, &:after {
		--i: 0;
		--noti: calc(1 - var(--i));
		--sgni: calc(2*var(--i) - 1);
		--c: hsl(0, 0%, 0%, var(--i));
		--notc: hsl(0, 0%, 0%, var(--noti));
		--fill: linear-gradient(var(--c), var(--c));
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		--c0: #{int_col($c0, $c1)};
		--c1: #{int_col($c1, $c0)};
		mask: var(--mask);
		mask-position: var(--mask-o, 50% 50%);
		mask-size: var(--mask-d);
		content: ''
	}
	
	&:after { --i: 1 }
}

.card:nth-child(1) {
	--d: 4em;
	
	&:before, &:after {
		--o: calc(50% - .5*var(--d));
		--strip-stop: calc(2*var(--d)/14.1);
		--strip-end: var(--c0);
		background: 
			repeating-linear-gradient(calc(var(--sgni)*45deg), 
				var(--strip-list));
		--mask: 
			var(--fill), 
			var(--joint-3), var(--joint-3), 
			var(--joint-0), var(--joint-0);
		--mask-o: 50%, var(--o) var(--o);
		--mask-d: var(--d) var(--d);
		-webkit-mask-composite: xor;
						mask-composite: exclude
	}
}

.card:nth-child(2) {
	--d: 4em;
	
	&:before, &:after {
		--strip-end: var(--c0);
		background: 
			linear-gradient(calc(var(--sgni)*45deg), 
				var(--strip-list)) 50%/ calc(.25*var(--d)) calc(.25*var(--d));
		--mask: 
			linear-gradient(calc(-90deg - var(--sgni)*45deg), 
					var(--joint-list)), 
			linear-gradient(calc(90deg - var(--sgni)*45deg), 
					var(--joint-list));
		--mask-o: 50%, 50% calc(50% - .5*var(--d));
		--mask-d: var(--d) var(--d);
	}
}

.card:nth-child(3) {
	--d: 5em;
	
	&:before, &:after {
		--strip-stop: calc(.1*var(--d));
		--strip-end: var(--c0);
		background: 
			repeating-linear-gradient(calc(var(--sgni)*45deg), 
				var(--strip-list));
		--o: calc(50% - var(--i)*.5*var(--d));
		--joint-stop: calc(.275*var(--d));
		--mask:
			radial-gradient(var(--joint-list));
		--mask-o: var(--o) var(--o);
		--mask-d: var(--d) var(--d)
	}
}

.card:nth-child(4) {	
	&:before, &:after {
		background: 
			linear-gradient(calc(var(--i)*180deg + 45deg), 
					var(--c1), transparent);
		--strip-stop: 1em;
		--strip-f: calc(.125 + .25*var(--i));
		--mask: 
			var(--fill), 
			repeating-linear-gradient(-45deg, var(--strip-list));
		mask-composite: exclude
	}
}

.card:nth-child(5) {
	--d: 1em;
	--ang: 45deg;
	
	&:before, &:after {
		--o0: calc(50% + var(--sgni)*.25*var(--d));
		--o1: calc(50% - var(--sgni)*.25*var(--d));
		background: 
			radial-gradient(circle, var(--c0) 35%, transparent 37%) 
					var(--o0) var(--o0), 
			radial-gradient(circle, var(--c1) 19%, transparent 21%) 
					var(--o1) var(--o1);
		background-size: var(--d) var(--d);
		--strip-stop: calc(4*var(--d));
		--o: calc(var(--i)*var(--d));
		--mask: 
			repeating-linear-gradient(var(--strip-list)), 
			repeating-linear-gradient(90deg, var(--strip-list));
		--mask-o: 0 var(--o), var(--o);
		mask-composite: exclude
	}
}

.card:nth-child(6) {
	&, &:before, &:after {
		--strip-stop: .5em;
		--strip-end: #{$c1};
		--strip-mid: #{$c0};
		background: 
			repeating-linear-gradient(var(--ang, 0deg), 
					var(--strip-list)) 
				50% calc(50% - var(--o, .1875*var(--strip-stop)));
	}
	
	&:before, &:after {
		--ang: calc(var(--sgni)*60deg);
		--o: 0px;
		filter: blur(1px);
		--mask: 
			repeating-conic-gradient(from calc((var(--noti) + .5)*60deg), 
					red 0deg 60deg, transparent 0deg 180deg);
	}
}

.card:nth-child(7) {
	--ang: 45deg;
	
	&:before, &:after {
		--strip-end: transparent;
		--strip-mid: var(--c0);
		--strip-stop: 10px;
		--strip-f: .4;
		background: 
			repeating-linear-gradient(var(--strip-list)), 
			repeating-linear-gradient(60deg, var(--strip-list)), 
			repeating-linear-gradient(-60deg, var(--strip-list));
		--mask: 
			conic-gradient(from calc((var(--i) - .75)*180deg), 
					transparent, red, transparent 50%)
	}
}

.card:nth-child(8) {
	--strip-end: #{$c0};
	--strip-mid: #{$c1};
	--strip-stop: .5em;
	background: 
		repeating-linear-gradient(45deg, var(--strip-list));
	
	&:before, &:after {
		--strip-stop: 4em;
		background: 
			linear-gradient(calc(var(--i)*180deg), 
					var(--c0), transparent) 
				50% calc(50% - .327*var(--strip-stop))/ 
				100% calc(.5*var(--strip-stop));
		--mask:
			repeating-linear-gradient(var(--strip-list)), 
			repeating-linear-gradient(60deg, var(--strip-list)), 
			repeating-linear-gradient(-60deg, var(--strip-list));
		--mask-o: 50% calc(50% - .075*var(--strip-stop)), 50%, 50%;
		--mask-d: 100% 200%, 100%, 100%;
		mask-composite: intersect
	}
	
	&:after {
		mask-composite: subtract, add;
	}
}

.card:nth-child(9) {
	--d: 5em;
	--ang: 45deg;
	--strip-stop: var(--d);
	--m-list: var(--strip-list);
	
	&:before, &:after {
		--strip-end: var(--c0);
		--strip-stop: .375em;
		background: 
			repeating-linear-gradient(calc(var(--i)*90deg), 
					var(--strip-list));
		--mask:
			var(--fill), 
			repeating-linear-gradient(45deg, var(--m-list)), 
			repeating-linear-gradient(-45deg, var(--m-list));
		mask-composite: exclude
	}
}

.card:nth-child(10) {
	--l: 4em;
	--d: calc(var(--l)*var(--sqrt2));
	--strip-end: #{$c0};
	--strip-stop: 4px;
	background: 
		repeating-linear-gradient(
				var(--strip-list)) $c1;
	
	&:before, &:after {
		background:
			linear-gradient(calc(var(--sgni)*90deg), 
					var(--c0), transparent) 50%/ calc(.5*var(--d));
		--strip-stop: var(--l);
		--o: calc(var(--i)*-.5*var(--d));
		--mask:
			repeating-linear-gradient(45deg, var(--strip-list)), 
			repeating-linear-gradient(-45deg, var(--strip-list));
		--mask-o: var(--o);
		--mask-d: calc(100% + .5*var(--d));
		mask-composite: intersect
	}
}

.card:nth-child(11) {
	--d: 5em;
	--l: calc(.05*var(--d)*var(--sqrt2));
	--joint-stop: 50%;
	--circ-list: var(--joint-list);
	
	&:before, &:after {
		background: 
			linear-gradient(calc(var(--sgni)*90deg), var(--c1), var(--c0)) 
				calc(50% - .5*var(--d))/ var(--d) var(--d);
		--joint-stop: 25%;
		--mask: 
			radial-gradient(var(--circ-list)),
			linear-gradient(calc(-90deg - var(--sgni)*45deg), 
					var(--circ-list)), 
			linear-gradient(calc(90deg - var(--sgni)*45deg), 
					var(--circ-list));
		--mask-o: 50%, 50%, 50% calc(50% - .5*var(--d));
		--mask-d: var(--l) var(--l), var(--d) var(--d), var(--d) var(--d);
		mask-composite: intersect
	}
}

.card:nth-child(12) {
	--d: 3em;
	background: 
		repeating-conic-gradient($c0, $c1, $c0 5%) 
		50%/ calc(2*var(--d)) var(--d);
	
	&:before, &:after {
		--strip-end: var(--c0);
		--strip-stop: 4px;
		background: 
			repeating-linear-gradient(calc(var(--sgni)*45deg), 
					var(--strip-list));
		--mask:
			var(--fill), 
			linear-gradient(115deg, var(--joint-list)),
			linear-gradient(115deg, var(--joint-list)),
			linear-gradient(245deg, var(--joint-list)),
			linear-gradient(245deg, var(--joint-list));
		--mask-o: 0 0, calc(.25*var(--d)) calc(-.5*var(--d));
		--mask-d: calc(.5*var(--d)) var(--d);
		mask-composite: exclude
	}
}

.card:nth-child(13) {
	--ang: 60deg;
	
	&:before, &:after {
		--strip-end: transparent;
		--strip-mid: var(--c0);
		--strip-stop: 10px;
		--strip-f: .4;
		background: 
			repeating-linear-gradient(var(--strip-list)), 
			repeating-linear-gradient(60deg, var(--strip-list)), 
			repeating-linear-gradient(-60deg, var(--strip-list));
		--mask:
			linear-gradient(var(--ang), var(--c) 50%, var(--notc) 0)
	}
}

.card:nth-child(14) {
	--d: 2em;
	background: conic-gradient($c0, $c1, $c0);

	&:before, &:after {
		background: 
			linear-gradient(calc(var(--i)*180deg), 
				var(--c0), var(--c1), var(--c0));
		--mask: 
			linear-gradient(90deg, var(--joint-list));
		--mask-o: calc(50% + (var(--i) - .25)*.5*var(--d));
		--mask-d: var(--d)
	}
}

.card:nth-child(15) {
	--d: 4em;
	--ang: 90deg;
	--strip-end: #{$c1};
	--strip-mid: #{$c0};
	--strip-stop: 8px;
	--main: var(--strip-list);
	
	&, &:before, &:after {
		background: 
			repeating-linear-gradient(var(--ang), var(--main));
	}
	
	&:before, &:after {
		--ang: 45deg;
		--strip-end: var(--c);
		--strip-mid: var(--notc);
		--strip-stop: var(--d);
		--mask: 
			repeating-linear-gradient(90deg, var(--strip-list)), 
			repeating-linear-gradient(45deg, var(--strip-list));
		mask-composite: intersect
	}
}

.card:nth-child(16) {
	--d: 6em;
	--strip-end: red;
	--strip-stop: var(--d);
	--side: var(--strip-list);
	
	&:before, &:after {
		--strip-end: var(--c0);
		--strip-stop: calc(.125*var(--d));
		--strip-f: .125;
		background: 
			repeating-linear-gradient(calc(var(--sgni)*45deg), 
					var(--strip-list));
		--mask: 
			var(--fill), 
			repeating-linear-gradient(var(--side)), 
			repeating-linear-gradient(90deg, var(--side));
		mask-composite: exclude
	}
}

.card:nth-child(17) {
	--d: 5em;
	--ang: 135deg;
	
	&:before, &:after {
		--strip-end: var(--c0);
		--strip-stop: calc(.1*var(--d));
		background:
			repeating-radial-gradient(circle, 
					var(--strip-list)) 
				calc(50% - var(--i)*.5*var(--d)) 50%/ 
				var(--d) var(--d);
		--joint-end: var(--notc);
		--joint-mid: var(--c);
		--joint-stop: 50%;
		--mask: 
			linear-gradient(var(--joint-list));
		--mask-o: 50% 50%;
		--mask-d: 100% var(--d)
	}
}

.card:nth-child(18) {
	--d: 5em;
	
	&:before, &:after {
		--strip-end: var(--c0);
		--strip-stop: .5em;
		background: 
			repeating-linear-gradient(calc(var(--sgni)*-45deg), 
					var(--strip-list));
		--mask: 
			repeating-conic-gradient(var(--c) 0% 12.5%, var(--notc) 0% 25%);
		--mask-d: var(--d) var(--d)
	}
}

.card:nth-child(19) {
	--d: 8em;
	--ang: 45deg;
	
	&:before, &:after {
		background: var(--c0);
		--strip-end: var(--c);
		--strip-mid: var(--notc);
		--strip-stop: var(--d);
		--mask: 
			linear-gradient(90deg, red, transparent), 
			radial-gradient(circle at 25% 25%, red 9%, transparent 35%), 
			repeating-linear-gradient(90deg, var(--strip-list)), 
			repeating-linear-gradient(-45deg, var(--strip-list));
		--mask-o: calc(50% - .25*var(--d)) 50%, 50% 50%, 50% 50%, 50% 50%;
		--mask-d: calc(.5*var(--d)), 8px 8px, 100%, 100%;
		mask-composite: intersect
	}
}

.card:nth-child(20) {
	--d: 8em;
	--ang: 45deg;
	--strip-stop: calc(.0625*var(--d));
	--narr: var(--strip-list);
	
	&:before, &:after {
		background: var(--c0);
		--strip-end: var(--c);
		--strip-mid: var(--notc);
		--strip-stop: var(--d);
		--mask: 
			linear-gradient(90deg, var(--c), var(--notc)), 
			repeating-linear-gradient(45deg, var(--narr)), 
			repeating-linear-gradient(90deg, var(--strip-list)), 
			repeating-linear-gradient(-45deg, var(--strip-list));
		mask-composite: intersect
	}
}

.card:nth-child(21) {
	--l: 3em;
	--joint-stop: calc(25% + 7px);
	--large-0: var(--joint-0);
	--large-1: var(--joint-1);
	--large-2: var(--joint-2);
	--large-3: var(--joint-3);
	
	&:before, &:after {
		background: linear-gradient($c1, $c0);
		--o: calc(50% - var(--i)*.5*var(--l));
		--joint-stop: calc(25% + 4px);
		--mask: 
			var(--top, var(--large-0), var(--large-1), var(--large-2), var(--large-3), )
			var(--joint-0), var(--joint-1), var(--joint-2), var(--joint-3);
		--mask-o: var(--o) var(--o);
		--mask-d: var(--l) var(--l);
		mask-composite: exclude	
	}
	
	&:after {
		background-size: 100% calc(.5*var(--l));
		--joint-stop: 5%;
		--top: ;
	}
}

View Compiled

/*
Some of these may need native conic-gradient() support
*/

View Compiled

This Pen is owned by Ana Tudor on CodePen.

See more by @thebabydino on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.