Backgrounds

What are CSS backgrounds?

This category covers decorative and animated backgrounds for sections and whole pages: CSS patterns such as dots, grids and stripes, gradient meshes, animated gradients, blobs, noise textures, particle and star fields, and SVG-based shapes. They are used behind hero sections, landing pages, login screens, pricing blocks and portfolio headers.

When to use a decorative background

Use a background pattern or animation to give a section identity or separate it from neighbouring content. The background should support the content, never compete with it. A quiet pattern behind text works; a busy animation behind long paragraphs does not.

Best practices for CSS background patterns and animations:

• Prefer pure CSS gradients and SVG over large images; they scale sharply and weigh almost nothing.
• Keep text contrast high. Add an overlay or a solid content panel when the background has light and dark areas.
• Mark decorative elements with aria-hidden="true" and keep them out of the tab order.
• Animate with transform and opacity, or animate gradient positions slowly; avoid heavy canvas loops on low-end devices.
• Pause or disable animation for prefers-reduced-motion users.
• Use pointer-events: none on decorative layers so they do not block clicks.
• Test in both light and dark themes; a pattern that looks subtle on white can be harsh on black.

Bootstrap, Tailwind CSS and pure CSS backgrounds

Every background comes with a live preview and code tabs for HTML, CSS and JS where a script is involved. Most backgrounds are pure CSS, so they work with any framework. Bootstrap 6 versions use the new alpha ES module build and theme-* colour roles so the pattern colours follow the active theme, Bootstrap 5 versions sit inside standard sections, and Tailwind CSS versions use utilities and arbitrary values. Use the framework filter, copy or download the code and tune colours, sizes and speed.