Filter color matrix

by kmouse

HTML

<div class="container white">
	<div class="wheel filter_ab">
		<div class="rg"></div>
		<div class="rb"></div>
		<div class="gb"></div>
	</div>

	<div class="wheel filter_ba">
		<div class="rg"></div>
		<div class="rb"></div>
		<div class="gb"></div>
	</div>
</div>
<div class="container black">
	<div class="wheel filter_ab">
		<div class="rg"></div>
		<div class="rb"></div>
		<div class="gb"></div>
	</div>

	<div class="wheel filter_ba">
		<div class="rg"></div>
		<div class="rb"></div>
		<div class="gb"></div>
	</div>
</div>

CSS

body { width: 800px; background: #ccc; }
		.white { background: #fff; }
		.black { background: #000; }
		.container {
			padding: 15px;
			border: 1px solid #000;
			margin: 10px 15px 30px;
			height: 300px;
		}
		.wheel {
			position: relative;
			width: 49%;
			height: 300px;
			float: left;
		}
		.wheel > div {
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0px;
			left: 0px;
		}
		.filter_ab { filter: contrast(0.5) opacity(0.5); }
		.filter_ba { filter: opacity(0.5) contrast(0.5); }

		.wheel > .rg { background: radial-gradient(#ff08 58%, transparent 60%); }
		.wheel > .rb { background: radial-gradient(#f0f8 58%, transparent 60%); left: 130px; }
		.wheel > .gb { background: radial-gradient(#0ff8 58%, transparent 60%); top: 100px; left: 75px; }