<body style='--val: 50'>
	<img src='https://images.unsplash.com/photo-1722630810924-5cd9fbf45de7?w=2400' alt='Image showing a bicycle parked against a brown wall with a circular window. There is a slider control on top allowing to drag a separator between the blurry version after the slider thumb and the original before the slider thumb.'/>
	<input type='range' aria-label='control allowing to drag the separator between the processed image version and the original.'/>
</body>
View Compiled
$thumb-w: 1em;
$thumb-x: -.5*$thumb-w;

@mixin thumb($f: 0) {
	@if $f > 0 {
		border: none;
		border-radius: 0
	}
	
	width: $thumb-w; height: 100%;
	background: #fff9;
	cursor: ew-resize
}

* { margin: 0 }

html, body {
	display: grid;
	grid-template: 100%/ 100%;
	height: 100%
}

body {
	overflow: hidden;
	
	&::after {
		clip-path: inset(0 0 0 calc(var(--val)*1%));
		backdrop-filter: blur(8px);
		content: ''
	}
}

img, [type='range'], body::after { grid-area: 1/ 1 }

img {
	width: 100%; height: 100%;
	object-fit: cover
}

[type='range'] {
	&, &::-webkit-slider-thumb { appearance: none }
	
	z-index: 1;
	margin: 0 $thumb-x;
	background: #0000;
	
	&::-webkit-slider-runnable-track { height: 100% }	
	
	&::-webkit-slider-thumb { @include thumb }
	&::-moz-range-thumb { @include thumb(1) }
}
View Compiled
addEventListener('input', e => {	
	document.body.style.setProperty('--val', +e.target.value)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.