Notes:

  1. Compass inline gradient result is an image (data uri image), it can't be with out fix size. If you need to use the same gradient with other sizes try to use CSS rule background-size: 100% 100% (browser support)
  2. inline-gradient is Sass/Compass function. You can use it with out Compass in Sass
  3. inline-gradient function use W3C syntax, there is no support for browser prefix syntax. W3C syntax is using for gradient type name(linear/radial), angle/side-to-corner and color-stop values. Width and height using in pixels.

Default usage example

Default using (without arguments) is equivalent to calling:
inline-gradient(linear, 100, 100, to bottom, #FFF 0%, #000 100%)

Inline

Browser

                        some_css_selector {
                            background-image: inline-gradient();
                        }

Simple usage example

Three colors 90deg rotate linear-gradient.
The same result you can get inline-linear-gradient(200, 100, 90deg, red 0%, green 50%, blue 100%);

Inline

Browser

                        some_css_selector {
                            background-image: inline-gradient(linear, 200, 100, 90deg, red 0%, green 50%, blue 100%);
                        }

Rainbow gradient example

Rainbow gradient from left to right.

Inline

Browser

                        some_css_selector {
                            background-image: inline-gradient(linear, 500, 150, to left, red 0%, orange 16.67%, yellow 33.34%, green 50%, lightskyblue 66.67%, blue 83.33%, violet 100%);
                        }

Rotated example

Two colors 135deg rotate linear-gradient.

Inline

Browser

                        some_css_selector {
                            background-image: inline-gradient(linear, 100, 100, 135deg, #f90 0%, #c96 100%);
                        }

Another rotated example

Two colors -23deg rotate linear-gradient.

Inline

Browser

                        some_css_selector {
                            background-image: inline-gradient(linear, 100, 100, -23deg, #f90 0%, #c96 100%);
                        }