CSS Skeleton Screen Generator

Tutorial video

This generator will allow you to create quick and easy pure css skeleton screen code without Tailwind css - don't restrict yourself! Simply create your design below and copy the css and html in the code pane in the bottom right hand corner.
The benefit of this generator is that there is no markup whatsoever to create the shapes as we purely rely upon the css :empty selector to create linear and radial gradients to create the shapes we want.

You may also select one of the pre-made templates as well and still modify those as you see fit.

Design View
blog
list
video
blank
Right click the canvas to add more shapes. Left click on existing shapes to edit them.
Paste your screen onto the canvas in order to properly line up the shapes. Take a print screen and paste using ctrl+v.
Repeat Design
Tools
  • Canvas Settings
  • Basics
  • Border Radius
  • Shimmer
  • Shimmer Angle Options
  • Shimmer Gradient Advanced Options
  • Shimmer Gradient Step Options
Result View
Code

Your generated code is below:

CSS:
HTML:

Insert your content inside this div once it's loaded and ready to be displayed, for example...

Angular:
<div class="skeleton-ctypsif8353">
      <div *ngIf="isLoaded">YOUR CONTENT</div>
</div>

Vue:
<div class="skeleton-ctypsif8353">
      <div v-if="isLoaded">YOUR CONTENT</div>
</div>

React:
<div class="skeleton-ctypsif8353">
      {isLoaded &&<div>YOUR CONTENT</div>}
</div>