- let data = ['steal', 'change', 'polish', 'perfect'];
- let n = data.length;

- for(let i = 0; i < n; i++)
	.card: h3 #{data[i]}
View Compiled
$lght: #bd5871, #489286;
$dark: #482533, #052b3c;

* { margin: 0 }

body, div, h3 { display: grid }

body {
	--s: min(3em, 5vw);
	--w: min(100%, 18em, 66vh);
	box-sizing: border-box;
	grid-gap: var(--s);
	grid-template-columns: 
		repeat(auto-fit, var(--w));
	place-content: center;
	padding: var(--s);
	min-width: 240px; min-height: 100vh;
	background: #262626
}

.card {
	--o: calc(.5*var(--s));
	--dim: 2em;
	--dif: calc(.5*var(--dim));
	aspect-ratio: 3/ 4;
	overflow: hidden;
	border-radius: .75em;
	box-shadow: var(--o) var(--o) 5px #1a1a1a;
	background: linear-gradient($dark);
	
	&::before, &::after { content: '' }
	
	&::before, &::after, h3 { grid-area: 1/ 1 }
	
	&::before {
		background: var(--pattern), var(--map);
		background-blend-mode: screen;
		filter: contrast(39);
		mix-blend-mode: lighten
	}
	
	&::after {
		background: linear-gradient($lght);
		mix-blend-mode: darken;
		backdrop-filter: blur(.75px)
	}
	
	&:nth-child(1) {
		--rad: radial-gradient(closest-side, #999, #000 69%);
		--map: linear-gradient(90deg, #000, #888, #000);
		--pattern:
			var(--rad) 0 0/ var(--dim) var(--dim), 
			var(--rad) var(--dif) var(--dif)/ var(--dim) var(--dim);
		
		h3 {
			letter-spacing: -.3125em;
			writing-mode: vertical-rl;
			text-orientation: upright
		}
	}
	
	&:nth-child(2) {
		--pattern: 
			radial-gradient(#666, #000) 0 0/ 100% var(--dim), 
			repeating-linear-gradient(-45deg, #000, #666, #000 var(--dif));
		--map: linear-gradient(45deg, #000, #666, #000);
		
		h3 { letter-spacing: -.0625em }
	}
	
	&:nth-child(3) {
		--slist: , #000, #4a4a4a, #000;
		--setup: 0 0/ var(--dim) var(--dim);
		--pattern: 
			linear-gradient(45deg var(--slist)) var(--setup), 
			linear-gradient(-45deg var(--slist)) var(--setup);
		--map: linear-gradient(to right top var(--slist));
		
		h3 { transform: skewy(45deg) }
	}
	
	&:nth-child(4) {
		--pattern: 
			linear-gradient(45deg, #000, #8c8c8c) 0/ var(--dim) var(--dim);
		--map: linear-gradient(45deg, #777, #000);
		
		h3 { place-self: end start }
	}
}

h3 {
	place-self: center;
	z-index: 2;
	padding: 0 .5em .125em;
	color: #ededed;
	font: 500 calc(3*var(--w)) montserrat alternates, sans-serif;
	text-shadow: 1px 1px #212121, -1px -1px #212121, 2px 2px 5px #121212
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.