# # 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