neat-annotationsOpen the live lab ↓

neat-annotations CSS Library Examples

Download Back To CSSScript.Com

Mark product copy, documentation, or UI text with handwritten CSS labels, eight arrow directions, and optional animated rainbow accents.

Hover around the examples

01 / In context

Notes that sit beside the work.

An annotation can point to a specific bit of interface language without pulling the reader away from the page.

Release checklist
release-notes.md
- [ ] REL-042 Publish migration notes   #docs
  Confirm rollback instructions

02 / Direction

Every side has a story.

Choose the direction that gives the label enough breathing room. All eight arrow positions remain visible here.

target
target
target
target
arrow placement
follows the compass
target
target
target
target
<span class="ann ann-n" data-note="points north">target</span>

03 / Palette

Built-in and custom color cues.

The full set of original color styles is shown below, followed by direct CSS color overrides.

Built-in colors
plain
amber
blue
green
red
purple
rainbow
Custom values
chalk
coral
lime
style="--ann-color: #e88770"

04 / Variations

Keep the marker. Or just keep the message.

These patterns retain the original highlight, no-mark, marker-only, nested, and long-note behavior.

Default markstable
No markstable
Highlight only

Ship when the migration guide is ready.

Stacked noteslogin flow
Long note
The release candidate is ready for review.

05 / Live lab

Try a note before you place it.

Adjust the label, direction, and color. The preview changes immediately and stays entirely in this page.

Controls

The stage uses the same ann classes as the rest of the gallery.

Preview
Release candidate
<span class="ann ann-n" data-note="review this detail">Release candidate</span>