[HTML/CSS] 그라데이션을 활용한 패턴 만들기

이전 포스팅에서 그라데이션을 만드는 두가지 방법에 대해 알아보았습니다. 이 선형 그라데이션과 원형 그라데이션은 패턴을 한번 만든 후 요소를 채울 만큼 반복해서 표시할 수 있는데요. 이 기법을 활용하면 그라데이션으로 패턴을 만들 수 있습니다. 이번 포스팅에서는 그라데이션을 활용하여 패턴을 만드는 방법에 대해 알아보도록 하겠습니다.

 

※ 선형, 원형 그라데이션을 만드는 방법이 궁금하시다면 아래 글을 참고해 주세요.

[HTML/CSS] 배경에 선형 그라데이션 효과 넣기(linear-gradient)

[HTML/CSS] 배경에 원형 그라데이션 효과 넣기(radial-gradient)

 

 

선형 그라데이션을 활용한 패턴 만들기

• repeating-linear-gradient : 선형 그라데이션 반복하기

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

선형 그라데이션을 반복할 때는 repeating-linear-gradient를 사용하면 됩니다. 위의 예제에서는 blue와 white의 그라데이션을 20px 크기만큼 반복해서 채우게 됩니다.

 

 

원형 그라데이션을 활용한 패턴 만들기

• repeating-radial-gradient : 원형 그라데이션 반복하기

See the Pen 원형 그라데이션 반복 by wjdxo513 (@wjdxo513) on CodePen.

 

마찬가지로 repeating-radial-gradient를 사용하시면 원형 그라데이션을 반복할 수 있으며 이를 활용하여 패턴을 만들 수 있습니다. 위의 예제에서는 blue와 white의 그라데이션을 20px 크기만큼 중심부터 반복해서 채우게 됩니다.