PocketPlay
中文

Skeleton Screen Generator

Compose a loading skeleton from avatars, headings, text lines, images and buttons, set the shimmer and radius, and copy ready HTML + CSS with a dark-mode variant.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Blocks

    Drag a row to reorder, or use the arrows. Every block has its own size controls.

    Style

    Base
    Highlight
    Dark base
    Dark highlight
    Corner radius 8px
    Gap 12px
    Duration 1.4s

    Preview

    HTML

    
      
    
        
    CSS
    
        
      
    
      
    
      
    
        
      
    
    
    
  
    

    

    How to build a skeleton screen
    1. Add the blocks that match your real layout — a header row with avatar, a title, a few text lines, an image, a button — and drag them into the right order.
    2. Match your design system: base and highlight colours, corner radius, gap and the shimmer speed. Flip the dark-mode preview to check both themes.
    3. Copy the HTML and CSS, or download a self-contained demo page, and swap the skeleton for real content once your data arrives.
    FAQ
    Why use a skeleton instead of a spinner?
    A skeleton shows the shape of the content that is coming, so the wait feels shorter and the page does not jump when data lands. Spinners work better for short, unpredictable waits such as a form submit.
    Is the shimmer accessible?
    Mark the skeleton container with aria-hidden="true" and announce loading state separately with aria-busy or a live region. The generated CSS also stops the animation under prefers-reduced-motion.
    How do I make the skeleton match my real component?
    Measure the real thing: use the same line height for text bars, the same avatar diameter and the same image aspect ratio. A skeleton that shifts layout when it is replaced is worse than none.
    

  
    

  
    
    
    
    
          
            
            
              CSS Gradient GeneratorHOT
              Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
            
          
          
            
            
              CSS Filter Generator
              Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.
            
          
          
            
            
              CSS Animation Generator
              Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.
            
          
          
            
            
              Box Shadow Generator
              Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.
            
          
          
            
            
              Border Radius Generator
              Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.
            
          
          
            
            
              Color PickerHOT
              Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.
            
          
          
            
            
              Color Converter
              Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.
            
          
          
            
            
              CSS Grid Generator
              Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.
            
          
    
    
    
    All tools →