CSS Skeleton Screen Generator
Generate CSS skeleton loading placeholders with shimmer animation for text, circles, and rectangles.
What is a CSS Skeleton Screen?
A CSS skeleton screen is a loading placeholder that mirrors the shape of the content that is about to appear. Instead of a blank area or a spinning loader, the page shows grey blocks where text, images, and avatars will load, which makes the wait feel shorter and keeps the layout from jumping when real content arrives.
This generator writes the CSS for a single skeleton element. You pick a shape — text line, circle, or rectangle — and the tool produces a .skeleton rule together with the matching @keyframes animation. Text lines suit paragraphs, circles suit avatars and profile photos, and rectangles suit images, cards, and table rows.
Three animations are available. Shimmer sweeps a highlight gradient across the element, pulse fades the opacity in and out, and wave slides a highlight bar from one side to the other. Each effect is written into the exported @keyframes, so the skeleton animates with pure CSS and needs no JavaScript in your own project.
You control the size and color of the skeleton: width as a percentage, height and border radius in pixels, animation speed in seconds, and separate base and highlight colors. Presets cover the most common patterns — default text, card, profile, article, table row, and dark mode — so you can start from a real layout and adjust from there.
Key Concepts
- Shape — text line, circle, or rectangle, matched to the content that will load.
- Animation — shimmer (sweeping gradient), pulse (opacity fade), or wave (sliding highlight).
- Base color — the resting color of the placeholder block (default
#e5e7eb). - Highlight color — the lighter tone used by the shimmer and wave effects (default
#f3f4f6). - Sizing — width in percent and height in pixels, with a border radius for rounded corners.
- Speed — the animation duration in seconds, adjustable from 0.5 up to 4.
How to Use
- Choose a shape — select text line, circle, or rectangle to match the content that will load.
- Adjust the size — set the width percentage, the height in pixels, and the border radius with the sliders.
- Pick an animation — choose shimmer, pulse, or wave, then set the animation speed in seconds.
- Set the colors — choose a base color and a highlight color for the skeleton effect.
- Copy the CSS — click Copy CSS to export the
.skeletonrule and its@keyframes.
Skeleton Reference
| Control | Range / values | Description |
|---|---|---|
| Shape | text, rectangle, circle | The form of the placeholder block. |
| Width | 40–100% (default 100) | Width of the block relative to its container. |
| Height | 8–200 px (default 16) | Height of the block. |
| Border radius | 0–50 (default 4) | Corner rounding of the block. |
| Animation | shimmer, pulse, wave | The loading effect applied to the block. |
| Speed | 0.5–4 s (default 1.5) | Duration of one animation cycle. |
| Base color | hex (default #e5e7eb) | Resting color of the placeholder block. |
| Highlight color | hex (default #f3f4f6) | Highlight color for the shimmer and wave effects. |
| Preset | Known settings |
|---|---|
| Default | text, 100% x 16px, radius 4, shimmer, 1.5s, base #e5e7eb, highlight #f3f4f6. |
| Card | rectangle, 100% x 160px, radius 8. |
| Profile | circle, 80px x 80px, pulse. |
| Article | text, 100% x 14px, radius 3, shimmer, 2s. |
| Table | rectangle, 100% x 40px, wave, 1.2s. |
| Dark | base #374151, highlight #4b5563 for dark backgrounds. |
Worked Examples
- Default text line — the Default preset produces a 100% wide, 16 pixel tall text line with radius 4, shimmer animation at 1.5 seconds, base #e5e7eb and highlight #f3f4f6.
- Avatar circle — the Profile preset creates an 80 by 80 pixel circle with the pulse animation, ideal for a user photo.
- Card image — the Card preset uses a rectangle at 100% width and 160 pixels tall with radius 8 for image and card placeholders.
- Article body — the Article preset uses text lines at 100% by 14 pixels with radius 3 and shimmer at 2 seconds for paragraph rows.
- Table row — the Table preset creates a rectangle at 100% by 40 pixels with the wave animation at 1.2 seconds.
- Dark mode — the Dark preset switches to base #374151 and highlight #4b5563 so the skeleton stays visible on dark surfaces.
Tips and Common Mistakes
- Match the shape to the content — use circles for avatars, rectangles for images and cards, and text lines for paragraphs.
- Build full layouts from several blocks — generate each shape separately and combine them so the skeleton mirrors the real page.
- Keep animation speed moderate — a duration between 1 and 2 seconds usually reads as a calm loading state rather than a flicker.
- Use the dark preset on dark backgrounds — light greys disappear on dark surfaces, so switch base and highlight colors.
- Round corners to match your design — radius 0 suits sharp images while a higher radius suits soft cards.
- Preview before you copy — confirm height, width, and animation together before pasting the CSS into your project.
Common Use Cases
Skeleton screens are most useful wherever content loads asynchronously and you want to keep the layout stable. These are some of the places they help most.
- Content feeds — show card and avatar placeholders while a feed of posts loads.
- Dashboards — hold chart and statistic areas with rectangle blocks during data fetches.
- E-commerce grids — preview product image and title rows before the catalogue finishes loading.
- Profile pages — use an avatar circle plus text lines while a user profile loads.
- Article pages — reserve paragraph rows so the reading layout does not shift when text arrives.
- Tables and admin lists — show 40 pixel row placeholders while records load.
Frequently Asked Questions
What is the difference between shimmer, pulse, and wave?
Shimmer sweeps a highlight gradient across the element, pulse fades the opacity in and out, and wave slides a highlight bar from one side to the other. Each creates a different loading feel.
Can I use multiple skeleton shapes together?
Yes. Generate each shape separately, then combine the CSS classes in your HTML and use different containers for different layout sections.
Does the generated CSS need JavaScript?
No. The output is a .skeleton rule plus @keyframes, so the animation runs entirely in CSS with no script required.
What do the width and height controls change?
Width is a percentage of the container (40 to 100 percent) and height is a fixed pixel value (8 to 200 pixels).
Which preset should I use for an avatar?
The Profile preset uses a circle at 80 by 80 pixels with the pulse animation, which suits user avatars and profile photos.
How do I use the skeleton on a dark background?
Choose the Dark preset, which sets the base color to #374151 and the highlight color to #4b5563 so the placeholder stays visible.
Can I change the animation speed?
Yes. The speed slider ranges from 0.5 to 4 seconds and applies to whichever animation you have selected.
Is my data sent anywhere?
No. Everything is generated in your browser and nothing is uploaded, stored, or shared.