CSS Background Gradients | |
---|---|
Value | Appearance |
Linear Gradients: linear-gradient(direction, color0 P0%, ..., colorN PN%); | |
background-image: linear-gradient(khaki, coral); | |
background-image: linear-gradient(to bottom, khaki, coral); | |
background-image: linear-gradient(to top, khaki, coral); | |
background-image: linear-gradient(to right, khaki, coral); | |
background-image: linear-gradient(to bottom right, khaki, coral); | |
background-image: linear-gradient(3.14rad, khaki, coral); | |
background-image: linear-gradient(45deg, khaki, coral); | |
background-image: linear-gradient(khaki, coral, tan, cyan); | |
background-image: linear-gradient(khaki, coral, tan, cyan, beige); | |
background-image: linear-gradient(khaki, coral, tan 20%, cyan 100%); | |
background-image: linear-gradient(to right, transparent, red, orange, yellow, green, blue, indigo, violet, transparent); | |
Radial Gradients: radial-gradient(shape end at center, color0 P0%, ..., colorN PN%) | |
background-image: radial-gradient(khaki, coral); | |
background-image: radial-gradient(ellipse farthest-corner at center, khaki, coral); | |
background-image: radial-gradient(circle, khaki, coral); | |
background-image: radial-gradient(circle closest-side, khaki, coral); | |
background-image: radial-gradient(circle closest-side at 75% 90%, khaki, coral); | |
background-image: radial-gradient(circle at 50% 90%, khaki, coral, cyan 90%); | |
background-image: radial-gradient(circle farthest-corner at 50% 90%, khaki, coral, cyan 90%); | |
background-image: radial-gradient(circle farthest-side at 50% 90%, khaki, coral, cyan 90%); | |
background-image: radial-gradient(circle closest-corner at 25% 90%, khaki, coral 90%); | |
background-image: radial-gradient(circle closest-side at 25% 90%, khaki, coral); | |
background-image: radial-gradient(circle closest-side at 75%, khaki 25%, coral 35%, cyan 90%); | |
background-image: radial-gradient(circle closest-corner at 40% 100%, transparent, red, orange, yellow, green, blue, indigo, violet, transparent); | |
Repeating Linear Gradients: repeating-linear-gradient(direction, color0 P0%, ..., colorN PN%); | |
background-image: repeating-linear-gradient(khaki, coral 25%, cyan 33%); | |
background-image: repeating-linear-gradient(to bottom right, khaki, coral, cyan 50%); | |
Repeating Radial Gradients: repeating-radial-gradient(shape end at center, color0 P0%, ..., colorN PN%) | |
background-image: repeating-radial-gradient(khaki, coral, cyan 50%); | |
background-image: repeating-radial-gradient(circle closest-corner at 75% 90%, khaki, coral 50%); | |
Conic Gradients: conic-gradient(from direction at location, color0 P0%, ..., colorN PN%); | |
background-image: conic-gradient(khaki, coral); | |
background-image: conic-gradient(at 25% 75%, khaki, coral); | |
background-image: conic-gradient(from 35deg, khaki, coral); | |
background-image: conic-gradient(from 35deg at 25% 75%, khaki, coral); | |
background-image: conic-gradient(khaki, coral, khaki); | |
background-image: conic-gradient(khaki, coral, cyan); | |
background-image: conic-gradient(khaki 10%, coral 30%, cyan 50%); | |
background-image: conic-gradient(transparent, red, orange, yellow, green, blue, indigo, violet, transparent); |
© 20072024 XoaX.net LLC. All rights reserved.