# GradientPicker
GradientPicker is a UI for managing various colors at the same time.
# What is GradientPicker
# How does it work?
CSS is support 6 gradient types.
linear-gradient
repeating-linear-gradient
radial-gradient
repeating-radial-gradient
conic-gradient
repeating-conic-gradient
1
2
3
4
5
6
2
3
4
5
6
WARNING
conic is currently only supported for chrome.
You can use css gradient string.
linear-gradient(to right, red 10%, white 10%)
1
TIP
connected 속성은 ColorStop을 서로 이어주는 역할을 합니다.
# Linear Gradient
linear-gradient(to right, red 10%, white 100%)
1
# angle
linear-gradient(45deg, gray 10%, white 100%)
1
# Repeating Linear Gradient
repeating-linear-gradient(to right, gray 0%, white 10%)
1
# angle
repeating-linear-gradient(45deg, gray 0%, white 10%)
1
# Radial Gradient
radial-gradient(circle, red 10%, white 100%)
1
# radial shape
circle
circle closest-side
circle closest-corner
circle farthest-side
circle farthest-corner
ellipse
ellipse closest-side
ellipse closest-corner
ellipse farthest-side
ellipse farthest-corner
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
radial-gradient(circle, gray 90%, black 90% 100%)
1
radial-gradient(circle closest-side, gray 90%, black 90% 100%)
1
radial-gradient(ellipse closest-side, gray 90%, black 90% 100%)
1
# center point
radial-gradient( ellipse closest-side at 50% 50%, gray 90%, black 90% 100%)
1
기본 위치는 중심점이 x: 50%, y: 50% 으로 해서 중간에 위치하게 되는데요. 중심점을 옮기면 전혀 다른 모양으로 보이게 됩니다.
radial-gradient( ellipse closest-side at 50% 70%, white 0%, black 100%)
1
# Repeating Radial Gradient
repeating-radial-gradient(circle, red 0%, white 20px)
1
# Conic Gradient
TIP
You can also use polyfill if you want. https://leaverou.github.io/conic-gradient/ This site does not currently use polyfill, so you can only see them on a Chrome-based browser.
conic-gradient(#f06, gold);
1
conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
1
conic-gradient(
at 50% 100%, red, yellow, lime, aqua, blue, magenta, red
);
1
2
3
2
3
conic-gradient(
from 10deg at 50% 50%, red, yellow, lime, aqua, blue, magenta, red
);
1
2
3
2
3
conic-gradient(
from 10deg at 50% 50%, red, yellow 10deg, lime .5turn, aqua, blue, magenta, red
);
1
2
3
2
3
# Repeating Conic Gradient
repeating-conic-gradient(
from 10deg at 50% 50%, red 10%, yellow 20%
);
1
2
3
2
3
repeating-conic-gradient(
from 10deg at 50% 50%, red 10%, yellow 10% 20%, red 20% 30%
);
1
2
3
2
3