<!doctype html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="/assets/reset.css" rel="stylesheet">
		<link href="setup.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<section>
			<p>This is a paragraph.</p>
		</section>
		<section>
			<p>This one is blurry!</p>
		</section>
		<section>
			<p>This one is brighter!</p>
		</section>
		<section>
			<p>You can also adjust the contrast.</p>
		</section>
		<section>
			<p>Or add a drop shadow.</p>
		</section>
		<section>
			<p>You can turn it to grayscale.</p>
		</section>
		<section>
			<p>Or shift the colors around the “color wheel.”</p>
		</section>
		<section>
			<p>Even invert it.</p>
		</section>
		<section>
			<p>And adjust the opacity.</p>
		</section>
		<section>
			<p>Or the saturation.</p>
		</section>
		<section>
			<p>And make it look old.</p>
		</section>
		<section>
			<p>Or even combine filters!</p>
		</section>
	</body>
</html>
index.html
			body {
	--base: 20px;

	display: grid;
	font-family: 'Helvetica', sans-serif;
	gap: var(--base);
	padding: var(--base);
}

section {
	background-color: gold;
	padding: calc(var(--base) / 2);
}

h2 { font-size: calc(var(--base) * 3); }
setup.css
			section:nth-child(2) { filter: blur(3px); }
section:nth-child(3) { filter: brightness(125%); }
section:nth-child(4) { filter: contrast(75%); }
section:nth-child(5) { filter: drop-shadow(0 8px 4px rgb(0 0 0 / 25%)); }
section:nth-child(6) { filter: grayscale(1); } /* Like `saturate` */
section:nth-child(7) { filter: hue-rotate(20deg); }
section:nth-child(8) { filter: invert(1); }
section:nth-child(9) { filter: opacity(50%); }
section:nth-child(10) { filter: saturate(50%); }
section:nth-child(11) { filter: sepia(100%); }
section:nth-child(12) { filter: hue-rotate(-50deg) drop-shadow(4px 4px tomato); }
style.css