User:Bfdifan2006/Gradient: Difference between revisions

<noinclude>{{mainspace|status=complete}}</noinclude>{{#switch:{{{1}}}|vertical|horizontal|diagonala|diagonalb|linear=background-image: -webkit-gradient(linear, {{#switch:{{{1}}}|vertical=50% top, 50% bottom|horizontal=left 50%, right 50%|diagonala=left top, right bottom|diagonalb=left bottom, right top|linear={{{start}}}, {{{end}}}}}, from(#{{{2|FFF}}}), to(#{{{3|000}}}){{#if:{{{4|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|1}})}}{{#if:{{{5|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|1}})}}{{#if:{{{6|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|1}})}}{{#if:{{{7|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|1}})}}{{#if:{{{8|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|1}})}}{{#if:{{{9|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|1}})}}{{#if:{{{10|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|1}})}});background-image: -khtml-gradient(linear, {{#switch:{{{1}}}|vertical=50% top, 50% bottom|horizontal=left 50%, right 50%|diagonala=left top, right bottom|diagonalb=left bottom, right top|linear={{{start}}}, {{{end}}}}}, from(#{{{2|FFF}}}), to(#{{{3|000}}}){{#if:{{{4|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|1}})}}{{#if:{{{5|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|1}})}}{{#if:{{{6|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|1}})}}{{#if:{{{7|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|1}})}}{{#if:{{{8|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|1}})}}{{#if:{{{9|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|1}})}}{{#if:{{{10|}}}|, color-stop({{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|1}})}});background-image: -webkit-linear-gradient({{#switch:{{{1}}}|vertical=top|horizontal=left|diagonala=top left|diagonalb=bottom left|linear={{#if:{{{grad|}}}|{{{grad}}}|{{{start}}}}}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);background-image: -moz-linear-gradient({{#switch:{{{1}}}|vertical=top|horizontal=left|diagonala=top left|diagonalb=bottom left|linear={{#if:{{{grad|}}}|{{{grad}}}|{{{start}}}}}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);background-image: -ms-linear-gradient({{#switch:{{{1}}}|vertical=top|horizontal=left|diagonala=top left|diagonalb=bottom left|linear={{#if:{{{grad|}}}|{{{grad}}}|{{{start}}}}}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);background-image: -o-linear-gradient({{#switch:{{{1}}}|vertical=top|horizontal=left|diagonala=left top|diagonalb=left bottom|linear={{#if:{{{grad|}}}|{{{grad}}}|{{{start}}}}}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);background-image: linear-gradient({{#switch:{{{1}}}|vertical=top|horizontal=left|diagonala=top left|diagonalb=bottom left|linear={{#if:{{{grad|}}}|{{{grad}}}|{{{start}}}}}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);|circle|circle|ellipse=background-image: -webkit-gradient(radial, {{{start|50% 50%}}}, {{{radius_inner|1}}}, {{{start|50% 50%}}}, {{{radius_outer|100}}}, from(#{{{2|FFF}}}){{#if:{{{4|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|1}})}}{{#if:{{{5|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|1}})}}{{#if:{{{6|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|1}})}}{{#if:{{{7|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|1}})}}{{#if:{{{8|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|1}})}}{{#if:{{{9|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|1}})}}{{#if:{{{10|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|1}})}}, to(#{{{3|000}}}));background-image: -khtml-gradient(radial, {{{start|50% 50%}}}, {{{radius_inner|1}}}, {{{end|50% 50%}}}, {{{radius_outer|100}}}, from(#{{{2|FFF}}}){{#if:{{{4|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{4}}}}}}}|1|1}})}}{{#if:{{{5|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{5}}}}}}}|1|1}})}}{{#if:{{{6|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{6}}}}}}}|1|1}})}}{{#if:{{{7|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{7}}}}}}}|1|1}})}}{{#if:{{{8|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{8}}}}}}}|1|1}})}}{{#if:{{{9|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{9}}}}}}}|1|1}})}}{{#if:{{{10|}}}|, color-stop({{#ifeq:{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}|{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}|{{#expr:(100*{{#replace:px||{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|2}}}}div{{{radius_outer|100}}})round 2}}%}}, #{{#titleparts:{{#replace:#||{{#replace: |/|{{{10}}}}}}}|1|1}})}}, #{{{3|000}}} 100%);background-image: -moz-radial-gradient({{{start|50% 50%}}}, {{#switch:{{{1}}}|ellipse=ellipse|#default=circle}} {{{size|cover}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);background-image: -webkit-radial-gradient({{{start|50% 50%}}}, {{#switch:{{{1}}}|ellipse=ellipse|#default=circle}} {{{size|cover}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);background-image: -ms-radial-gradient({{{start|50% 50%}}}, {{#switch:{{{1}}}|ellipse=ellipse|#default=circle}} {{{size|cover}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);background-image: -o-radial-gradient({{{start|50% 50%}}}, {{#switch:{{{1}}}|ellipse=ellipse|#default=circle}} {{{size|cover}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);background-image: radial-gradient({{{start|50% 50%}}}, {{#switch:{{{1}}}|ellipse=ellipse|#default=circle}} {{{size|cover}}}, #{{{2|FFF}}} 0%{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}}{{#if:{{{10|}}}|, {{{10}}}}}, #{{{3|000}}} 100%);|repeating-vertical|repeating-horizontal|repeating-diagonala|repeating-diagonalb=background-image: -webkit-repeating-linear-gradient({{#switch:{{{1}}}|repeating-vertical=top|repeating-horizontal=left|repeating-diagonala=left top|repeating-diagonalb=left bottom}}, {{{2}}}, {{{3}}}{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}});background-image: -moz-repeating-linear-gradient({{#switch:{{{1}}}|repeating-vertical=top|repeating-horizontal=left|repeating-diagonala=left top|repeating-diagonalb=left bottom}}, {{{2}}}, {{{3}}}{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}});background-image: -o-repeating-linear-gradient({{#switch:{{{1}}}|repeating-vertical=top|repeating-horizontal=left|repeating-diagonala=left top|repeating-diagonalb=left bottom}}, {{{2}}}, {{{3}}}{{#if:{{{4|}}}|, {{{4}}}}}{{#if:{{{5|}}}|, {{{5}}}}}{{#if:{{{6|}}}|, {{{6}}}}}{{#if:{{{7|}}}|, {{{7}}}}}{{#if:{{{8|}}}|, {{{8}}}}}{{#if:{{{9|}}}|, {{{9}}}}});}}<noinclude>This template should be used only in backgrounds.

<span style=color:red>'''WARNING!'''</span> This cannot be presented in every browser!

! Browser !! Linear !! Radial