• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

View a gradient?

Neil E.

Active member
Sounds weird but that is what I want to do. Here is a snapshot of the XF gradient files on my server.


I want to see what each one looks like, but there doesn't seem to be a way to view the file contents directly using the cpanel tools. I downloaded a file and opened it with photo software, but it doesn't look like anything I recognize. How do I find out what these gradients look like? Do I have to use CSS to apply each one to an element to see the effect of the gradient?


Well-known member
Most of them are semi transparent, so opening them in a picture viewer or something would not really yield good results. Try creating an empty html file and apply the background on a box. Something like this:
<!DOCTYPE html>
<style type="text/css">
.testingGradient {
  margin: 40px;
  background: pink url('path/to/gradient/to/test.png') repeat-x;
  height: 12px;
  width: 50px;
<div class="testingGradient"><span>Testing mah gradient</span></div>
Just tweak that code a bit and you should be able to see it. (It's completely untested on my part, I just wrote it quickly).

Neil E.

Active member
Instead of trying a new element as suggested, I increased the size of an existing element and applied every gradient in turn.
Of the 23 gradients, only the following were useful: