Skeleton screens — the grey placeholder shapes shown while content loads — feel faster than spinners and are easy to build with pure CSS. This free CSS skeleton generator creates a customisable loading placeholder with an optional avatar, any number of text lines and a pulse or shimmer animation, then gives you the copy-ready HTML and CSS. Everything runs in your browser.
Live preview
Generated HTML and CSS
How to Use
- Choose how many text lines the placeholder should show.
- Tick the avatar option if you need a profile circle.
- Pick a pulse, shimmer wave or no animation, and a base colour.
- Copy the generated HTML and CSS into your project.
Key Features
- Live skeleton preview with your settings.
- Pulse and shimmer animations, or a static placeholder.
- Copy-ready HTML and CSS output.
- Pure CSS — no JavaScript needed in your project.
FAQs
What is a skeleton screen?
A skeleton screen is a placeholder UI shown while content loads, using grey shapes that mimic the final layout. It feels faster than a spinner.
How do I trigger it in my app?
Show the skeleton markup while data loads, then replace it with the real content once it arrives.
Can I change the colours?
Yes. Set any base colour in the generator and the output CSS will use it.