Anchoring effect

앵커링 효과

The first number people see becomes a reference point for the next price.

···
html
<div class="price"><span class="eyebrow">REFERENCE PRICE</span><div class="anchor">$120</div><div class="rule"></div><span class="eyebrow">TODAY'S OFFER</span><div class="offer">$79</div><span class="save">SAVE $41</span></div>
css
@media(min-width:700px){body>div{transform:scale(1.45)}}.price{position:relative;width:min(72%,350px);padding:clamp(12px,3vmin,30px);background:var(--surface);border:2px solid var(--fg);box-shadow:clamp(5px,1.5vmin,14px) clamp(5px,1.5vmin,14px) 0 var(--accent);text-align:center}.eyebrow{font:800 clamp(10px,max(1.6vmin,1vw),12px)/1 sans-serif;letter-spacing:.13em;color:var(--muted)}.anchor{font:900 clamp(28px,8vmin,74px)/1 sans-serif;letter-spacing:-.06em;animation:anchor 4s ease-in-out infinite}.rule{height:2px;background:var(--line);margin:clamp(5px,1.5vmin,12px) 0}.offer{font:900 clamp(34px,10vmin,94px)/1 sans-serif;color:var(--accent);letter-spacing:-.06em;animation:offer 4s ease-in-out infinite}.save{display:inline-block;background:var(--accent);color:white;padding:.35em .7em;font:900 clamp(10px,max(1.6vmin,1vw),13px)/1 sans-serif;transform:rotate(-5deg);animation:offer 4s ease-in-out infinite}@keyframes anchor{0%,8%{opacity:0;transform:translateY(8px)}20%,100%{opacity:1;transform:none}}@keyframes offer{0%,20%{opacity:0;transform:scale(.82)}30%,88%{opacity:1;transform:scale(1)}100%{opacity:0}}

Anchoring is the tendency for an initial piece of information to influence later judgments. After seeing a high reference price, the same offer may feel less expensive.

The demo reveals a reference price first, then emphasizes the offer. In a comparison test, control for both presentation order and how credible the reference is.

Inventing a list price to imply a discount damages trust. Show genuine prices and conditions clearly.

When to use

Use it when arranging plans or offers, after verifying that the reference price is real.

Open as page ↗