Dotted Text Using CSS Only

Puneet Sharma

4 years ago

Here is a demo with source code to create a Dotted text headline above dark/black background. You can use it in your projects to give a unique look to your website titles and headings.

Demo

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

HTML

<h1>Dotted Text - Created with the help of CSS</h1>

CSS

body {
	margin: 0;
	background-color: rgba(9, 14, 23, 1);
        text-align: center;
}

h1 {

        font-size: clamp(2rem, 5vw, 6rem);
	letter-spacing: 0.03em;
	background: radial-gradient(circle at center, white .11rem, transparent 0);
	background-size: .4rem .4rem;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}