PocketPlay
中文

CSS Background Patterns

32 pure-CSS background patterns — stripes, dots, grids, checkerboard, zigzag, waves, hexagons and more — with live colour, size and opacity controls and copyable CSS.

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

Patterns

Settings

Background
Pattern
Colour presets
Tile size 24px
Line width 2px
Pattern opacity 100%
Angle 45°

—

CSS


    

  




How to use the CSS pattern generator
  1. Pick a pattern from the gallery — every one is drawn with gradients only, no images and no extra requests.
  2. Tune the background and pattern colours, the tile size, the line width, the opacity and the angle; the big preview updates live.
  3. Copy the CSS and drop it on any element. The whole pattern lives in one background declaration.
FAQ
Why use CSS instead of a PNG?
A gradient pattern is a few hundred bytes of CSS, stays sharp on any screen density, costs no HTTP request and can be re-coloured with a single value change or a CSS variable.
Will the pattern scroll with the page?
By default yes. Add background-attachment: fixed if you want it to stay put, and remember that large tiles repeating over a full page can cost a little paint time on low-end phones.
How do I make it fade or sit behind content?
Lower the pattern opacity here, or put the pattern on a ::before pseudo-element with position: absolute; inset: 0; z-index: -1; so your content stays fully opaque.


  


  

    
    

          
            
            
              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 →