About the CSS Background Image Generator
Every option here writes into background-image, which is a layer list rather than a single value. That is what makes the pattern presets possible: a checkerboard is four linear gradients offset against each other, a dot grid is one radial gradient tiled by background-size, and grid lines are two one pixel gradients crossed at ninety degrees. Because these are painted rather than fetched, they cost nothing in network requests and stay sharp at any zoom level.
Tile size drives the repeat. It becomes the background-size for the pattern presets and the stripe period for the striped preset, where each colour takes half the tile. Angle rotates the linear and conic presets, measured clockwise from the twelve o clock direction, so 90 runs left to right and 180 runs top to bottom. The radial preset ignores angle because its shape is set by a position instead.
Choosing the image option switches to a url() layer with a fit, position and repeat of your choosing. Only https, root relative, dot slash relative and data:image addresses are accepted, and any address containing a quote, bracket or raw space is rejected so the generated rule cannot be broken by the value inside it. Remember that a background image is decorative to assistive technology; anything carrying meaning belongs in an <img> element with alt text. Pair the result with the Border Generator to frame the box.
How to use
- Pick a style from the dropdown. The gradients use both colours, and the patterns paint colour two on top of colour one.
- Adjust Tile size to change how tightly the pattern repeats, and Angle to rotate the gradients.
- For a photo, choose Image URL, paste an https address, and pick a fit of cover or contain.
- Copy the declarations from the output pane into your stylesheet.
Common questions
- Why is my pattern blurry when I zoom in?
- It should not be, because gradients are drawn by the renderer at the current scale. Blurring usually means a raster image is being scaled up by the cover fit instead.
- How do I layer a gradient over a photo?
- Generate the gradient, generate the image rule, then put both values in one background-image declaration separated by a comma. The first layer in the list sits on top.
- What angle do I use for a top to bottom gradient?
- Use 180. CSS gradient angles point towards the end colour and are measured clockwise from up, so 0 goes bottom to top and 90 goes left to right.
- Do these patterns work as a border or a mask?
- They work anywhere a background image is allowed, including pseudo elements. For a patterned border, paint the pattern on a wrapper and inset the child with padding.