Double drop shadow

This is what I kinda want to build.

Directly go to the result

Attempt 1: just a drop shadow

Conclusion: offset is too big.

Attempt 2: just a box shadow

Conclusion: works on the block element (afcourse). So no solution for this

Attempt 3: 1px offset for a lot of drop shadows

Conclusion: works oke'ish. But the smooth lines are still missing.

Attempt 4: Just use the blur

Conclusion: No way to stir the blur.

Attempt 5: even more pixels

Conclusion: This works. It fill like a hard job for the browser, but if you use it just sometimes, it should be fine!

Attempt 6: Add the shadow effect

This crashes the browser, so pro tip: don't use this!

.try-6 {
	color: white;
	filter: drop-shadow(1px 1px 0 var(--experiment-color))
		drop-shadow(1.5px 1.5px 0 var(--experiment-color))
		drop-shadow(2px 2px 0 var(--experiment-color))
		drop-shadow(2.5px 2.5px 0 var(--experiment-color))
		drop-shadow(3px 3px 0 var(--experiment-color))
		drop-shadow(3.5px 3.5px 0 var(--experiment-color))
		drop-shadow(4px 4px 0 var(--experiment-color))
		drop-shadow(4.5px 4.5px 0 var(--experiment-color))
		drop-shadow(5px 5px 0 var(--experiment-color)) 
		drop-shadow(-1px 1px 0 rgba(0, 0, 0, 0.2))
		drop-shadow(-1.5px 1.5px 0 rgba(0, 0, 0, 0.2)) 
		drop-shadow(-2px 2px 0 rgba(0, 0, 0, 0.2))
		drop-shadow(-2.5px 2.5px 0 rgba(0, 0, 0, 0.2)) 
		drop-shadow(-3px 3px 0 rgba(0, 0, 0, 0.2))
		drop-shadow(-3.5px 3.5px 0 rgba(0, 0, 0, 0.2)) 
		drop-shadow(-4px 4px 0 rgba(0, 0, 0, 0.2))
		drop-shadow(-4.5px 4.5px 0 rgba(0, 0, 0, 0.2)) 
		drop-shadow(-6px 6px 0 rgba(0, 0, 0, 0.2))
		drop-shadow(-6.5px 6.5px 0 rgba(0, 0, 0, 0.2)) 
		drop-shadow(-7px 7px 0 rgba(0, 0, 0, 0.2))
		drop-shadow(-7.5px 7.5px 0 rgba(0, 0, 0, 0.2)) 
		drop-shadow(-8px 8px 0 rgba(0, 0, 0, 0.2));

	-webkit-text-stroke: 0.05rem var(--experiment-color);
}

Attempt 7: Less shadow

Still chashes the browser

Attempt 8: Add another word (with :before) on the same location and apply styles there

Nope: this turns into something really ugly!

Attempt 9: Add another word (in the HTML) on the same location and apply styles there

The best it can get! You need to put the word with the shadow as initial element in the HTML, otherwise the drop-shadow won't work well.