Css Background Pattern

Generate pure-CSS repeating background patterns without any image file. Choose from five built-in pattern types — dots, grid, diagonal, zigzag, and waves — pick a foreground and background color, set a tile size, and the tool emits the exact background-image / background-size declarations needed to reproduce the pattern.

1. Pick a Pattern from the dropdown (dots, grid, diagonal, zigzag, waves). 2. Set the foreground color (the lines or dots) and background color with the color pickers. 3. Drag the Size slider (5–50px) to change the tile spacing. 4. Copy the generated CSS, which already includes the required background-color, background-image, and background-size properties.

dots: radial-gradient dots on a grid. grid: crossed linear-gradients forming a grid. diagonal: repeating-linear-gradient stripes at 45deg. zigzag: four layered linear-gradients forming a zigzag tile. waves: radial-gradient arcs repeated horizontally. Size controls the tile dimension in pixels and is applied per pattern as documented in the source.