Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Smooth Edges CSS
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@1,900&display=swap" rel="stylesheet">
<div class="text">ROUNDED TEXT BEFORE</div>
<div class="text smooth">ROUNDED TEXT AFTER</div>
<p>
Inspired by PhotoshopSupply.com: <a href="https://www.photoshopsupply.com/actions/smooth-edges-photoshop-action-free">Smooth Edges Photoshop</a></p>
<svg viewbox="0 0 100% 100%">
<defs>
<filter id="smooth">
<feMorphology operator="dilate" radius="0" />
<feGaussianBlur stdDeviation="3" in="operator"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0 1 1"></feFuncA>
</feComponentTransfer>
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0 1 1"></feFuncA>
</feComponentTransfer>
<feComponentTransfer out="rounded1">
<feFuncA type="table" tableValues="0 0 1 1"></feFuncA>
</feComponentTransfer>
<feComposite in2="rounded1" in="SourceGraphics" operator="in"/>
</filter>
</defs>
</svg>

Smooth Edges CSS

If you find that some fonts have edges that are too sharp or too rough, you can smooth edges and create rounded fonts using CSS and SVG filters.

Inspired by the free Photoshop action from PhotoshopSupply.com Smooth Edges Photoshop

A Pen by Ion Emil Negoita on CodePen.

License.

.text{
font-size:70px;
font-family:'Raleway';
color:black;
}
.smooth{
filter:url(#smooth);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment