2

Some web frameworks are basing on using PNG images as backgrounds. Some of them are simply 1xN pixel PNGs with single color, others contain gradient (going from color X to Y).

For example, I'd like to generate 1x100 pixel PNG with color #666666, or 1x100 pixel PNG with gradient starting from #999999 ending with #666666.

Is there a Windows tool specialized in such things, or in which generating such image is relatively easy (doesn't require manually creating new canvas, choosing color tool, filling it etc.)?

1

Using images for backgrounds simply wastes space, network bandwith etc. Yes that is not that important for most desktop users anymore but still minimization is better - especially for metered connections. You can use CSS3 gradients that work with at least IE 6+, Firefox 3.6+, Chrome, Opera 10+, Safari 4+ which covers pretty much all internet users nowadays.

So this answer doesn't exactly match your question; but it will lead to a higher quality web design.

I heartily recommend the Ultimate CSS Gradient Generator.

  • It is a webapp and will function in any recent browser
  • It has lots of presets that you can use as a starting place
  • If you want you can do crazy things with lots of stops and funky colour mixing
  • Supports all gradient options via it's GUI (at least last time I read the CSS3 docs)
  • Supports SASS CSS via the latest beta of Compass.

For simple single colour backgrounds I recommend using CSS as well for example:

.redbackground {
    background-color:red;
}

will give any element with redbackground as a class a background colour that is surprisingly enough red; you can use some basic colour names, an extended list of colour names, RGB or Hex. Also with most even remotely modern browsers but for IE starting with IE9+ you can also use RGBA, HSL, HSLA colour values.

Alternatively and my prefered option you can use ColorZilla's Firefox plugin or Chrome Extension. I haven't used the Chrome Extension being a Firefox man for decades (not quite but I ditched IE many years ago), but I assume it is equivalent. The plugin/extension features:

*Note the spelling of background-color is with color rather than colour; however as a Canadian I use the Canadian/British spelling of colour wherever W3C standards do not require otherwise.*

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.