#ruler CSS effects

4 free, pure-CSS effects match the "ruler" tag. Each is copy-ready and needs no library or build step.

An engraved calibration ruler with minor and major graduations under a dropped cursor.

A numbered measuring scale sits above a slim rail marked by a glowing garnet blade.

A signed ruler runs from minus one hundred to plus one hundred with a bright zero detent.

An I beam doubles as a ruler where minor notches run behind three labelled marks.

Popular tags