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

View a gradient?

Discussion in 'Styling and Customization Questions' started by Neil E., Nov 30, 2012.

  1. Neil E.

    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?
  2. MagnusB

    MagnusB 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).
    Jake Bunce and Shelley like this.
  3. Neil E.

    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:

Share This Page