Member Avatar for skald89

Someone is asking me to create a metallic background for their website. Currently the background color is #404040. I tried using a gradient image and a gradient css generator. With both it creates a certain height and then repeats the gradient.

I want to say I can't do it and get it over with but its not right and I should learn for the future.

  • 3 Contributors
  • 2 Replies
  • 90 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Short, practical plan to get a realistic metallic background without visible seams or obvious repeating bands. is on the right track wanting to learn this — pointed to tutorials and shared options; below are compact, directly usable techniques and a small code example you can drop into a project.

Pick the look first (brushed, polished, or chrome). For most website uses a three-layer approach works best: 1) a scalable CSS gradient for the base sheen, 2) a very fine repeating gradient or thin-stripe layer for the “brushed” lines if needed, and 3) a small semi-transparent noise tile (100–300px) overlaid to remove banding and add realism. Use background-size/background-repeat to control tiling so the sheen itself does not repeat as an image.

Example (CSS with layered backgrounds):

body {
  background-image:
    linear-gradient(180deg, #6d6d6d 0%, #333333 60%, #8a8a8a 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, rgba(0,0,0,0.02) 1px 2px),
    url("/images/noise-16.png");
  background-repeat: no-repeat, repeat, repeat;
  background-size: cover, auto, 200px 200px;
}

Troubleshooting/cautions: if a generated PNG gradient tiles badly, either make a seamless tile or switch to CSS gradients which scale. If you still see banding on large displays, increase noise opacity or use SVG procedural noise (feTurbulence) so you do not need a raster image. Test on high-DPI screens and supply a fallback flat color for very old browsers. For reference on the gradient and background properties used here see the MDN docs for linear-gradient, repeating-linear-gradient and background-size.

Recommended Answers

All 2 Replies

Member Avatar for minitauros

You could try finding a tutorial somewhere? :) I'd suggest

Member Avatar for Arkinder

Option one. Option two.

If you choose option two, make sure it actually says that you can use it.

Regards
Arkinder

Edited by Arkinder because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.