Circled Highlight Text Effect

Want to add some visual flair to your text? A rounded highlight is a great way to call out important bits. It’s simple and effective. This code will help you create custom circled highlight text effect. Just adjust the padding and offset to fit your font.

HTML Structure

<h1>Bringing Your<br /> <span class="sf-circled-highlight">Vision</span> to Life</h1>

CSS

/* ---------------------------------------- */
/*  Snippflow Circled Highlight Text Effect */
/* ---------------------------------------- */

.sf-circled-highlight{
    position:relative;
    z-index: 1;
}
.sf-circled-highlight:before,
.sf-circled-highlight:after{
    content: "";
    width: 120%;
    height: 120%;
    position: absolute;
    top: -10%;
    left: -10%;
    z-index: -1;
    border-radius: 100%;
    box-sizing: border-box;
}
.sf-circled-highlight:before {
    border: 0.3vw solid #63D9B3;
    transform: rotate(-2deg);
}
.sf-circled-highlight:after{
    border: 0.1vw solid #63D9B3;
    transform: rotate(2deg);
}

Key Concepts

• More visibility – Text in a circle pops against other elements so users can quickly see what’s important.
• Looks good – This gives a clean and modern look to a design which will appeal to younger audiences and generate more interest.
• Focus – A circle around the text pulls the eye, great for promoting key messages, offers or CTAs.
• Easy to use – In the world of web design and marketing materials this is easy to apply and gives big visual impact without overwhelming the design.
• Multi-use – Works across websites, presentations, social media posts and advertising graphics.

Result:

See the Pen Circled highlight by Snippflow (@snippflow) on CodePen.

See also

• Unordered and Ordered Lists with Auto-Increment Using Pseudoclasses
• Animated Gradient Background
• CSS Status Indicators with Pulsing Animation
• jQuery Countdown Timer
• Custom Link Styles Based on File Type