What are layout, paint and composite?

They are the stages of browser rendering. Layout computes geometry, paint fills in pixels, and composite layers the result onto the screen. Changes that only composite, like transform and opacity, are the cheapest.

Why should I avoid layout-triggering properties?

Layout is the most expensive stage because it can cascade to the whole page. Animating width or top forces layout on every frame, which causes jank, while animating transform stays in the cheap composite stage.

Which properties are composite-only?

transform and opacity are the classic composite-only properties. The lab's composite reference list gives you the full set you can copy into your notes.

How does the interactive diagram work?

Type or pick a CSS property and the pipeline diagram lights up the stages it triggers: style, then layout, paint and composite as applicable. It makes the cost of each property visible at a glance.

Can I copy the property lists?

Yes. Each stage has a reference list of properties you can copy, handy for team docs, code reviews or interview prep.

Is this based on real browser data?

The mappings follow the widely used CSSTriggers data model of which properties trigger which stages in modern browsers. Behavior can vary slightly between engines, so treat it as a strong guide rather than gospel.

Rendering Pipeline Lab - Free Online CSS Rendering Reference Tool | IconVault

Look up any CSS property and see if it triggers layout, paint or composite. Interactive pipeline diagram plus copyable lists. Free, in your browser.

All tools

Rendering Pipeline Lab

Which CSS properties hit layout, paint or composite

5 of 5 free uses left

The pipeline

Click a property below to see which stages it runs. Animating transform and opacity stays on the cheap composite path.

Style

Layout

most expensive

Paint

medium

Composite

cheapest

transform triggers: COMPOSITE

Already-painted layers are just moved, scaled or faded on the GPU. This is the fast path for animations.

5 of 5 free copies left.

Simplified model: real browsers merge and skip stages based on layer promotion, containment and caching. A reference built on the public CSS Triggers data, good for intuition and interview prep, not a profiler replacement.

About this tool

IconVault's Rendering Pipeline Lab answers the classic performance question: does this CSS property trigger layout, paint, or just composite? Search any property and an interactive pipeline diagram lights up to show exactly which rendering stages it hits, so you can spot jank before it ships.

The lab ships with copyable reference lists of layout, paint and composite properties for quick lookups and documentation. It runs 100% in your browser and is free with no signup, built for frontend developers tuning animations and scroll performance.

Frequently asked questions

Popular searches

rendering pipelinebrowser rendering pipelinecss rendering pipelinecss triggers layout paint compositewhich css properties trigger layoutcss property layout paint composite listcsstriggerscss triggers referencelayout vs paint vs compositebrowser rendering stagescritical rendering pathcss performancecss animation performanceavoid layout thrashingwhat causes layout thrashingcomposite only css propertiestransform opacity compositecheapest css properties to animatebest css properties for animationcss jank causesfix animation jank css60fps css animationssmooth css animations guidecss paint performancereduce repaints cssbrowser repaint causescss reflow vs repaintwhat triggers reflowwhat triggers repaintcss layout performancewill change csscss containment performancecontent visibility performancefrontend performance toolweb performance referencecss rendering referencecss property costcss property performance costinteractive rendering pipelinerendering pipeline diagramcss pipeline visualizerlearn browser renderinghow browsers render cssbrowser internals cssfrontend interview css renderingcss interview questions renderingweb dev performance cheat sheetcss optimization checklistanimation performance checklistfree css performance toolno signup dev tool

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →

Rendering Pipeline Lab - Free Online CSS Rendering Reference Tool | IconVault

Rendering Pipeline Lab

The pipeline

About this tool

Frequently asked questions

Popular searches

More tools

Code Playground

JSON Formatter

Base64 Encoder

JWT Decoder

Coming soon