Developer Tools New Tool

Free Online CSS Skeleton Loader Generator

Build skeleton placeholders for text lines of varying widths, a heading, an avatar circle, an image block and a full card. Set the base and highlight colour, the corner radius, the shimmer direction and speed, or use a plain pulse instead, with a reduced motion block written every time.

Free Forever Nothing Uploaded Shimmer or pulse Runs in your browser

Free Online CSS Skeleton Loader Generator

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Skeleton Loader Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

On the left is a card skeleton, on the right the pieces on their own. Both are real elements running the generated CSS, on a white surface so the colours read the way they will on a light page.

CSS

Colour and shape Class name Base Highlight Radius px

Movement Style Direction Cycle ms Reduced motion slows the pulse by

Pieces Line height px Line gap px Title height px Avatar px Image ratio Lines in the card

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Skeleton Loader

A few steps, and nothing is uploaded.

Set the two colours The base is the resting colour of the placeholder and the highlight is the band that sweeps across it. Keep them close together: a strong contrast between the two turns a quiet loading state into a flashing one.

Choose shimmer or pulse A shimmer moves a gradient across the block in the direction you pick. A pulse just moves between the two colours, which is calmer and a great deal cheaper to paint on a long list. Both are generated from the same two colours.

Size the pieces Line height and gap should match the real text they stand in for, and the title height should match the real heading. The avatar is a circle, the image block uses an aspect ratio, and the number of body lines in the card is up to you.

Copy the set The output holds the base rule, the line, title, avatar and image pieces, the card layout, the keyframes and a reduced motion block. The HTML it expects is written as a comment at the top, including the aria-hidden that keeps it out of the way.

What to Know About Skeleton Screens

Including why a skeleton that does not match the layout is worse than none.

A skeleton has to match the layout it stands in for. The whole point is that the page does not jump when the content arrives, and that only works if the placeholder occupies the same space as the real thing: the same line height, the same number of lines, the same image ratio, the same avatar size. A generic set of grey bars that is shorter or taller than the content produces a visible lurch, which is worse than showing nothing and then showing the page. Measure the real component and set these controls to match it.

The shimmer is an animation, so reduced motion applies. A gradient sweeping across the screen is movement, and on a list of twenty skeleton rows it is a great deal of movement. Every rule set this page writes ends with a @media (prefers-reduced-motion: reduce) block: the shimmer is switched off and the block sits at its base colour, and the pulse is slowed by the factor you choose. A static grey placeholder still says loading perfectly well, which is why stopping it is safe here in a way it is not for a spinner.

A skeleton is silent to a screen reader. Empty divs with a background colour announce nothing, so the loading state has to be said in words somewhere. Mark the skeleton aria-hidden="true" so it is not read as a pile of empty elements, and put the message in a live region, for example a wrapper with role="status" containing the text Loading. The comment at the top of the output shows that shape.

This page generates pieces, not your component. It does not know your layout, so it cannot build a skeleton that matches it: there is no table skeleton, no list skeleton, no form skeleton, no dark mode variant and no way to read an existing rule set back into the controls. The card here is an example of how the pieces combine, and you will need to arrange them yourself for anything more specific.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

All the usual pieces Text lines, a title, an avatar circle, an image block and a card.

Shimmer or pulse A moving gradient in any direction, or a calmer colour pulse.

Reduced motion The media block is written every time and cannot be removed.

A realistic preview A real card skeleton, on a white surface, running the real CSS.

Paste ready output The whole set with the expected HTML as a comment at the top.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Skeleton Loader Generator

A skeleton screen is a promise about the layout. It says the content is coming and it will be this shape, and it works because the eye has somewhere to rest while the network does its job. It stops working the moment the placeholder and the real content disagree about size, because then the arrival of the data throws the page around, and the person loses their place in whatever they were reading.

This page generates the pieces that a skeleton is made from rather than pretending to know your component. There is a base class that carries the colour and the animation, and then a line, a title, an avatar and an image block, plus a small card layout showing how they stack. The preview puts a real card skeleton on a white surface next to the individual pieces, so you can judge the colours the way they will actually appear.

The two decisions worth explaining are the animation and the reduced motion block. The shimmer is a gradient whose background position is animated, which the compositor handles cheaply, and the pulse is a plain background colour animation for when even that is too much on a long list. The reduced motion block is always written, and unlike a spinner a skeleton loses nothing by standing still, so the shimmer is switched off completely rather than merely slowed.

Frequently Asked Questions

Layout shift, reduced motion, screen readers and when to use one.

When you know the shape of what is coming and there is more than one piece of it: a feed, a list of cards, a profile, a table of rows. A skeleton tells the person what to expect and where it will be. For a short wait after an action, such as saving a form, a spinner or a button in a loading state is more appropriate, because there is no layout to promise.

Because the skeleton is not the same size as the content. Check the line height and the gap against the real text, count the lines, and give the image placeholder the same aspect ratio as the real image. If the real text wraps to four lines and your skeleton has three, the page will move by one line height every time. Matching those numbers is the entire job.

It is cheap on a handful of elements and noticeable on a hundred. The animation moves a background position, which stays off the main thread, but every skeleton block is a separate painted element, so a long list adds up. If you are rendering many rows, the pulse costs less, and it is also the calmer of the two on a screen full of placeholders.

Yes. It is decoration standing in for content that does not exist yet, so mark it aria-hidden="true" and put the actual loading message in a live region with role="status". Without that you get a screen reader announcing a group of empty elements, or nothing at all, and the person has no idea whether the page is working.

Keep the base and the highlight close together, a few percent of lightness apart, and both quiet against the page background. On a light page a light grey base with a slightly lighter highlight is the convention. A high contrast sweep draws the eye to the loading state rather than to the content that is about to replace it, which is the opposite of what a skeleton is for.