PocketPlay
中文

CSS Shorthand Generator

Build the shortest margin, padding, border, font, flex, transition, animation, background, outline, inset and grid-area shorthands — or paste a shorthand and expand it back to longhand.

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

Shorthand


        

      

      

        

          
Longhand

          
        

        

      

      

        
Preview

        
Aa

      

    

  






How to use the CSS shorthand generator
  1. In Build shorthand, choose a property and fill in the parts you care about — the tool collapses the values to the shortest legal shorthand and shows the longhand it stands for.
  2. Watch the note under the result: it explains why four sides became one, two or three values.
  3. Switch to Expand shorthand, paste declarations you found in someone else's CSS, and read them back as explicit longhand properties.
FAQ
Why does my font shorthand break things?
font resets every font longhand it does not mention, including line-height, font-variant and font-stretch. Use it only when you are setting the whole font, otherwise set longhands.
What order do the four box values go in?
Clockwise from the top: top, right, bottom, left. With three values the missing left copies right; with two, top/bottom then left/right; with one, all four.
Is shorthand always better?
Not always. Shorthands reset the properties they omit, which is exactly what you want for a fresh component and exactly what bites you when you are overriding one value in a theme. For an override, prefer the longhand.


  


  

    
    

          
            
            
              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 →