Skip to content
AI & Machine Learning Medium #causal#attention-mask#autoregressive

Causal Attention Mask

Upper-triangular mask prevents tokens from peeking forward. Required for autoregressive training.

A free, animated causal attention mask you can read here or embed on any website, from Scrollchart.

Causal Attention Mask

Causal Attention MaskUpper triangle masked to -∞ before softmax. Each token sees only past and present.ShesellsseashellsbytheShesellsseashellsbytheQuery (row)Key (column)-∞-∞-∞-∞-∞-∞-∞-∞-∞-∞-∞-∞-∞-∞-∞0.980.350.650.120.280.600.080.220.300.400.050.100.150.250.450.040.080.120.180.280.30attendedfuture blockedMask patterns:Causal (GPT)GPT, LlamaBidirectional (BERT)BERT, RoBERTaPrefix-LMT5 decoder, JurassicWithout the causal mask, the model can see future tokens during training and learns a trivial copy solution, not generation

An attention score matrix with the upper triangle masked to -inf before softmax. Each token can only attend to itself and earlier positions. Bidirectional vs causal vs prefix-LM masks compared.

Good for

  • GPT and Llama architecture deep dives explaining why training is parallelisable despite being autoregressive
  • Tutorial content comparing BERT vs GPT training objectives for engineers switching between the two paradigms
  • Explainers on prefix-LM and T5 masking for content about multi-task fine-tuning and instruction following

Source & accuracy

This causal attention mask is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Blocking future context during autoregressive training

A causal attention mask is an upper-triangular matrix of zeros and negative infinities applied to attention weights. It prevents each token from attending to tokens that come after it. At position i, attention can only see positions 0 to i, not i+1 to n.

This constraint is essential for autoregressive training, where the model must predict the next token given only the past. Without the mask, the model could 'cheat' by looking at the answer before predicting, learning a trivial mapping instead of genuine sequential reasoning.

Difference between training and inference

During training, the mask enables efficient batch processing: a single forward pass computes loss for all positions simultaneously. During inference (generation), you don't apply the mask; you generate one token at a time, sequentially. Each new token is computed in isolation, attending to all previous tokens.

This asymmetry is a common point of confusion. The mask forces the learning problem; inference has no mask because you're not trying to predict future tokens, just generate the next one.

Encoder-decoder models and bidirectional attention

Encoders (like in BERT or the encoder half of a T5) do not use causal masks; they attend bidirectionally because they're not generating, just encoding. Decoders (like in GPT or the decoder of T5) use causal masks during both training and inference to enforce left-to-right generation.

Embed this diagram

Add this animated causal attention mask to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated causal attention mask for any website.
Who uses it
AI/ML blogs, CS educators.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="causal-mask" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Causal Attention Mask" for my website?
Scrollchart provides "Causal Attention Mask" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a causal attention mask in a developer or tech blog?
Copy the one-line snippet from the Scrollchart diagram page and paste it into your post HTML. It works in any static site generator, CMS, or hand-coded HTML page. The embed is a thin loader, not an iframe, so the content is fully in your DOM.