Css3 background gradient code, css3 background gradient
From top to bottom # grad {
Background:-webkit-linear-gradient (red, blue );
Background:-o-linear-gradient (red, blue );
Background:-moz-linear-gradient (red, blue );
Background: linear-gradient (red, blue );
} From left to right # grad {
Background:-webkit-linear-gradient (left, red, blue );
Background:-o-linear-gradient (right, red, blue );
Background:-moz-linear-gradient (right, red, blue );
Background: linear-gradient (to right, red, blue );
} From top left to bottom right # grad {
Background:-webkit-linear-gradient (left top, red, blue );
Background:-o-linear-gradient (bottom right, red, blue );
Background:-moz-linear-gradient (bottom right, red, blue );
Background: linear-gradient (to bottom right, red, blue );
} Usage # grad {
Background:-webkit-linear-gradient (180deg, red, blue );
Background:-o-linear-gradient (180deg, red, blue );
Background:-moz-linear-gradient (180deg, red, blue );
Background: linear-gradient (180deg, red, blue );
} Multiple color nodes # grad {
Background:-webkit-linear-gradient (left, red, orange, yellow, green, blue, indigo, violet );
Background:-o-linear-gradient (left, red, orange, yellow, green, blue, indigo, violet );
Background:-moz-linear-gradient (left, red, orange, yellow, green, blue, indigo, violet );
Background: linear-gradient (to right, red, orange, yellow, green, blue, indigo, violet );
} Use transparency # grad {
Background:-webkit-linear-gradient (left, rgba (255, 0,), rgba (255, 0 ));
Background:-o-linear-gradient (right, rgba (,), rgba ));
Background:-moz-linear-gradient (right, rgba (255, 0,), rgba (255, 0 ));
Background: linear-gradient (to right, rgba (255, 0,), rgba (255, 0 ));
} Radial gradient # grad {
Background:-webkit-radial-gradient (red, green, blue );
Background:-o-radial-gradient (red, green, blue );
Background:-moz-radial-gradient (red, green, blue );
Background: radial-gradient (red, green, blue );
} Radial gradient with a circular shape
# Grad {
Background:-webkit-radial-gradient (circle, red, yellow, green );
Background:-o-radial-gradient (circle, red, yellow, green );
Background:-moz-radial-gradient (circle, red, yellow, green );
Background: radial-gradient (circle, red, yellow, green );
}
Uneven radial gradient
# Grad {
Background:-webkit-radial-gradient (red 5%, green 15%, blue 60% );
Background:-o-radial-gradient (red 5%, green 15%, blue 60% );
Background:-moz-radial-gradient (red 5%, green 15%, blue 60% );
Background: radial-gradient (red 5%, green 15%, blue 60% );
}