Select Page

Here is a cool demo with source code to create an outlined text with CSS only. Initially, I searched on the internet and tried to replicate it myself here on my website with the demo. I think it looks absolutely stunning. This can be used with a black/dark backgrounds also.


DEMO

Open demo in a full window – https://demos.webdevpuneet.com/set1/outlined-text-css/index.html


HTML

<h1>Outlined text using CSS</h1>

CSS

h1 {
	font-size: clamp(2rem, 5vw, 6rem);
	letter-spacing: 0.03em;
	-webkit-text-stroke: 2px var(--primary);
	color: transparent;
	filter: drop-shadow(0 0 .35rem var(--primary));
}