Do these patterns use image files?
No. Every one is built from CSS gradients, either linear-gradient, repeating-linear-gradient, or radial-gradient. There is no image to request, no file to host, and nothing to serve at 2x for a Retina screen, because the browser rasterises the gradient at the device's own resolution.
How do I change the pattern scale?
With background-size, which the size slider controls. It sets the tile in pixels, and every shape in the tile scales with it. If you edit background-size by hand after copying, the whole pattern grows or shrinks; if you want to move the pattern rather than resize it, edit background-position instead.
Why does the checkerboard need a background-position line?
Because it is two identical 45-degree gradients layered on top of each other, with the second offset by half a tile. Without the background-position line offsetting that second layer, the two gradients land exactly on top of each other and you see diagonal stripes rather than a checker.
Can I make the pattern semi-transparent?
Not through this tool, which emits two solid colours. You can edit the copied CSS and swap a colour for an rgba() value, and the gradients will respect the alpha. In practice, choosing a foreground closer in luminance to the background achieves the same subtlety without a second layer.
Will these patterns hurt performance?
Not meaningfully. A tiled gradient is cheap for the compositor and it saves you the image request entirely. The one thing to avoid is animating background-position on a large patterned area, which forces repaints on every frame; animate a transform on a wrapper instead.