# CSS Top Sites

> Free tutorials, references and tools for CSS backgrounds, with a focus on black and dark backgrounds: background-color, background-image, background-size, background-position, background-repeat, gradients, patterns, dark mode and accessible contrast. Every page has live demos and copy-paste CSS.

All content is written for front-end developers and designers. Contrast ratios quoted on the site are calculated with the WCAG 2 relative-luminance formula.

## Black and dark backgrounds

- [How to make a black background in CSS](https://csstopsites.com/pages/black-background-css): Copy-paste code for a #000 page background, where the CSS goes, inline styles and the JavaScript way
- [Shades of black in CSS](https://csstopsites.com/shades-of-black-css): Black hex codes (pure, off-black, slate, charcoal) with swatches and contrast ratios
- [Colours that go with a black background](https://csstopsites.com/black-background-combinations): Text and accent colours on black with computed WCAG contrast
- [Black background examples](https://csstopsites.com/black-background-examples): Gallery of black background designs with CSS
- [Black grid backgrounds](https://csstopsites.com/black-grid-background-css): Graph paper, dot grids, checkerboards and evenly spaced squares with gradients
- [Dark backgrounds](https://csstopsites.com/pages/dark-backgrounds): Dark theme background design patterns
- [Dark mode backgrounds](https://csstopsites.com/dark-mode-backgrounds): Switching backgrounds with prefers-color-scheme and custom properties
- [Accessible dark backgrounds](https://csstopsites.com/accessible-dark-backgrounds): WCAG contrast on dark surfaces, halation, testing
- [Dark glassmorphism](https://csstopsites.com/glassmorphism-dark-backgrounds): backdrop-filter glass effects on dark backgrounds with contrast notes
- [Red and black background](https://csstopsites.com/red-and-black-background): Red and black palettes, gradients and contrast
- [Blue and black background](https://csstopsites.com/blue-and-black-background): Blue and black palettes, gradients and contrast
- [Green and black background](https://csstopsites.com/green-and-black-background): Green and black palettes, gradients and contrast
- [Purple and black background](https://csstopsites.com/purple-and-black-background): Purple and black palettes, gradients and contrast
- [Black and gold background](https://csstopsites.com/pages/combinations/black-and-gold-background): Gold hex codes, metallic gradients and maroon/black/gold variants
- [Black background with smoke effect](https://csstopsites.com/pages/combinations/black-background-smoke): Animated CSS smoke on black

## Background properties

- [All CSS background properties](https://csstopsites.com/css-background-properties): Overview of every background longhand and the shorthand
- [CSS background cheat sheet](https://csstopsites.com/css-background-cheat-sheet): Quick reference with initial values and syntax
- [background-color](https://csstopsites.com/pages/css-background-color): Values, default (transparent) and colour formats
- [background-image](https://csstopsites.com/pages/css-background-image): url() syntax, gradients and multiple images
- [background-size: cover](https://csstopsites.com/css-background-size-cover): cover vs contain vs 100% 100% vs auto
- [background-position](https://csstopsites.com/css-background-position): Keywords, percentages, edge offsets, negative values and calc()
- [background-repeat](https://csstopsites.com/css-background-repeat): repeat-x, repeat-y, space, round and tile spacing
- [background-attachment](https://csstopsites.com/css-background-attachment-fixed): fixed, scroll, local and the iOS workaround
- [background-clip](https://csstopsites.com/css-background-clip): border-box, padding-box, content-box and text
- [background-origin](https://csstopsites.com/css-background-origin): Where positioning starts
- [background-blend-mode](https://csstopsites.com/css-background-blend-modes): Blending background layers
- [Multiple backgrounds](https://csstopsites.com/css-multiple-backgrounds): Layer order and gradient overlays

## Gradients, patterns and effects

- [CSS gradients](https://csstopsites.com/background-gradients): Linear, radial and conic gradients
- [Gradient mesh backgrounds](https://csstopsites.com/css-gradient-mesh-backgrounds): Layered radial gradients for mesh effects
- [CSS background patterns](https://csstopsites.com/css-background-patterns): Stripes, dots, grids and more without images
- [SVG backgrounds](https://csstopsites.com/svg-backgrounds): Inline SVG and data URIs as backgrounds
- [Animated backgrounds](https://csstopsites.com/animated-css-backgrounds): Keyframe-animated backgrounds with reduced-motion support
- [Parallax scrolling backgrounds](https://csstopsites.com/parallax-scrolling-backgrounds): CSS parallax techniques
- [Video backgrounds](https://csstopsites.com/video-backgrounds-css): Full-screen video backgrounds with CSS
- [Responsive backgrounds](https://csstopsites.com/responsive-backgrounds): Media queries, image-set() and art direction
- [Background performance](https://csstopsites.com/css-background-performance): LCP, image formats and paint cost
- [Common background mistakes](https://csstopsites.com/common-css-background-mistakes): Debugging backgrounds that don't show or behave

## Tools

- [CSS background generator](https://csstopsites.com/tools/css-background-generator): Solid colour, linear and radial gradient generator with live preview
- [CSS pattern generator](https://csstopsites.com/tools/css-pattern-generator): Grid, dot, stripe, checkerboard and square patterns as CSS
- [Contrast checker](https://csstopsites.com/tools/contrast-checker): WCAG AA/AAA contrast for text on dark backgrounds

## Optional

- [About](https://csstopsites.com/about)
- [Contact](https://csstopsites.com/contact)
- [Privacy policy](https://csstopsites.com/privacy)
- [Cookie policy](https://csstopsites.com/cookies)
- [Terms of use](https://csstopsites.com/terms)