No. 66 of 106

Highlighted Text

Hand-drawn underlines, circles and marks on key words.

    On this page
  1. Highlighted Text
  2. Cross out the old way
  3. A marker for the key line
  4. Doodles in every color
  5. Services that react
NEWSON · ELEMENT NO. 66

Point at the words that matter — 16 hand-drawn shapes and 6 modern styles that draw themselves in, rotating words, per-word shapes, gradient and sketchy strokes, and five ways to trigger them.

22 stylesrotating words{shape::word}on view / loop / hover / scrollgradient strokesketchy lineshandwritten font

We build websites that feel fast

SAAS LANDING PAGE · BEFORE / AFTER

Give every highlight its own shape with {shape::word} — here a strike-through for the problem and an underline for the promise.

strike-throughunderlineper-word shapetext below
Trackwise Analytics

Stop guessing. Start knowing.

See which pages bring customers, which ones lose them, and what to fix first — in one clear dashboard. (Trackwise is a fictional product.)

Pricing · annual plan

Save 40% when you pay yearly

Sparks around a number make a discount impossible to miss.

Online store · banner

Summer sale — up to 50% off everything

A pill badge that grows in, with white text on a gradient.

BLOG · PULL QUOTE

A serif pull quote with a highlighter stroke behind the words that matter most.

markerserifblockquoteleft aligned
“The best productivity system is the one you’ll still be using in six months. Keep it simple enough to survive a bad week.”

— from “Small Systems”, a sample article on this demo blog

KIDS & EDUCATION · PLAYFUL

Handwritten highlighted words with loopy, zigzag and scribbled shapes that redraw on a loop.

handwrittenloopszigzagscribble circleloop

Learning maths can be fun!

Read, draw and explore every day

“Little Owls Learning” — a fictional kids’ learning app used as an example.

AGENCY · HOVER TO DRAW

Set the trigger to hover: each service draws its own shape when the mouse (or keyboard focus) lands on it — a lively services menu.

hovermixed shapeskeyboard focus

Branding
Web design
Motion
Strategy

ABOUT PAGE · FOLLOWS THE SCROLL

With the scroll trigger each shape draws as its word moves up the screen — and undraws when you scroll back.

scroll scrubmixed stylesparagraph

Fieldnote started in 2016 as two people and a kitchen table. Today we are a team of forty who still believe that good software should feel calm, respect your time and never sell your data.

Fieldnote is a fictional company.

Neon Nights · live music

Friday is electric.
Saturday is unforgettable.

Neon glow and a flowing gradient — made for events, gaming and nightlife. (Neon Nights is a fictional event.)

Harbourline Homes

Homes for sale in Lisbon

Rotating place names with a 3D flip, framed by brackets. (A fictional agency.)

Careers

We’re hiring designers

The typing effect with a color-block swipe.

22 STYLES

Every style on the same words. They draw in as you reach them. The last two cards combine options.

16 hand-drawn6 modern CSSany colorgradient stroke
1 · Curvy underline
Make it pop
2 · Double underline
Make it pop
3 · Squiggle
Make it pop
4 · Zigzag
Make it pop
5 · Brush swoosh
Make it pop
6 · Loopy underline
Make it pop
7 · Hand-drawn circle
Make it pop
8 · Scribbled circle
Make it pop
9 · Rough box
Make it pop
10 · Brackets
Make it pop
11 · Strike-through
Make it pop
12 · Cross-out
Make it pop
13 · Arrow underline
Make it pop
14 · Sparks
Make it pop
15 · Scribble fill
Make it pop
16 · Marker swipe
Make it pop
17 · Color block
Make it pop
18 · Thick bar
Make it pop
19 · Pill badge
Make it pop
20 · Gradient text
Make it pop
21 · Neon glow
Make it pop
22 · Outline → filled
Make it pop
23 · Rotating words
Make it pop
24 · Sketchy gradient
Make it pop

All businesses, products, events and quotes on this page are fictional examples.

Say it with a circle.

106 elements for news, Highlighted Text included.