Explorateur d'arrière-plan CSS

Choose a gradient or pattern, adjust its colors and spacing, then copy the complete CSS. The preview updates as you edit. Both output formats reproduce the same background.

Combined presets paint the pattern over the gradient. Overlay opacity runs from 0% (invisible) to 100%. Tile size is in pixels; its range depends on the pattern. Some patterns use several tiles or multiples of this size.

Custom CSS accepts a single background value, for example linear-gradient(90deg, #123, #abc), without background:. It applies only to the preview. Referenced images, inherited values and CSS variables depend on the page where you use the CSS; gradients also depend on the element dimensions.

Settings survive tool switching. Custom CSS is kept in memory for this page session and is not saved in cookies. The sample card is not part of the copied CSS.

Hexagon size is the side length; triangle and isometric-grid size is the triangle side length. For diamonds and Argyle it is the repeat width, for herringbone the brick length. Rings share the preview center and size sets their radial spacing. Sunburst repeats 12 pairs of 15° sectors. Speckles and contour waves are deterministic decorative patterns, not random noise or terrain data.

Exact tile shapes are embedded SVG images in the CSS; they need no external image files. A destination site must allow data images in its image policy. The sample card is excluded from the export.