Filter Reference


by Jeremy Caudle
code

I haven't messed with filters in a while, so I thought I'd take the time to put together a quick reference. It's not complete and I should do a version that incorporates images and SVG in the future. That'll be version 2.

Blur
Brightness
Contrast
Drop-Shadow
Grayscale
Hue-rotate
Invert
Opacity
Sepia
Saturate

View the code:

HTML and JS 
<div class="codedoodle-block">
			<div><h6 class="f-blur">Blur</h6></div>
			<div><h6 class="f-brig">Brightness</h6></div>
			<div><h6 class="f-cont">Contrast</h6></div>
			<div><h6 class="f-drop">Drop-Shadow</h6></div>
			<div><h6 class="f-gray">Grayscale</h6></div>
			<div><h6 class="f-huro">Hue-rotate</h6></div>
			<div><h6 class="f-inve">Invert</h6></div>
			<div><h6 class="f-opac">Opacity</h6></div>
			<div><h6 class="f-sepi">Sepia</h6></div>
			<div><h6 class="f-satu">Saturate</h6></div>
</div>
CSS 
.codedoodle-block {
			max-width: 40em;
			margin: 1rem auto;
			padding: 1rem;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr;
			grid-gap: 1rem;
			font-family: Helvetica, Arial, sans-serif;
			font-size: 14px;
		}

		.codedoodle-block div {
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-content: center;
			background: #cdcdcd;
			text-align: center;
		}
		
		.codedoodle-block div h6 {
			margin: 1rem auto;
			transform: rotate(-15deg);
		}

		.f-blur {
			filter: blur(2px);
		}
		
		.f-brig {
			color: #f54c6a;
			filter: brightness(1.5);
		}

		.f-cont {
			color: #ff0099;
			filter: contrast(40);
		}

		.f-drop {
			filter: drop-shadow(0 0 3px black);
			color: yellow;
		}
		
		.f-gray {
			filter: grayscale(1);
			color: yellow;
		}
		
		.f-huro {
			filter: hue-rotate(-45deg);
			color: yellow;
		}
		
		.f-opac {
			filter: opacity(.4);
			color: yellow;
		}		

		.f-sepi {
			filter: sepia(1.4);
			color: yellow;
		}
		
		.f-satu {
			color: #99cc33;
			filter: saturate(20);

		}

Tags