CSS / radial-gradient - 원형 그라데이션 효과 만들기

radial-gradient

radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다.

문법

radial-gradient( shape size at position, color1, color2, ..., color3 )
  • shape : 원 모양인지 타원 모양인지 정합니다.
  • size : 크기를 정합니다.
  • position : 중심의 위치를 정합니다.
  • color : 색을 정합니다.

아래의 예제로 하나씩 알아보겠습니다.

예제 1

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			div.jb {
				margin: 0px auto;
				width: 400px;
				height: 400px;
				background: radial-gradient( yellow, red, brown );
			}
		</style>
	</head>
	<body>
		<div class="jb"></div>
	</body>
</html>

노란색, 빨간색, 갈색으로 변하는 원형 그라데이션입니다.

예제 2

div.jb {
	margin: 0px auto;
	width: 400px;
	height: 400px;
	background: radial-gradient( yellow 10%, red 100px, brown 50% );
}

색 뒤에 길이를 넣어서 색이 차지하는 범위를 정할 수 있습니다.

예제 3

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( ellipse, yellow, red, brown );
}

정사각형이 아닌 직사각형일 때 원 모양으로 채울지 타원 모양으로 채울지 정할 수 있습니다. 원일 때는 circle, 타원일 때는 ellipse를 입력합니다. ellipse가 기본값이므로, 값이 없으면 타원 모양이 적용됩니다.

예제 4

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( circle, yellow, red, brown );
}

직사각형에서도 원 모양으로 그라데이션을 만듭니다.

예제 5

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( at 30% 20%, yellow, red, brown );
}

중심의 위치를 바꿉니다.

예제 6

크기를 정합니다. 가능한 값은 farthest-corner, farthest-side, closest-corner, closest-side이고, 기본값은 farthest-corner입니다.

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( farthest-corner at 30% 20%, yellow, red, brown );
}

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( farthest-side at 30% 20%, yellow, red, brown );
}

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( closest-corner at 30% 20%, yellow, red, brown );
}

div.jb {
	margin: 0px auto;
	width: 100%;
	height: 400px;
	background: radial-gradient( closest-side at 30% 20%, yellow, red, brown );
}

Related Posts

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 양쪽 배분(균등 분할) 정렬 방법

CSS / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다. 하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> ...

CSS / 표(table) 꾸미기 / 크기 정하기

CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...

CSS / Flex / align-items

CSS / Flex / align-items

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법

표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...

CSS / 인용문(Blockquote) 꾸미기

CSS / 인용문(Blockquote) 꾸미기

다음과 같은 인용문을 꾸미는 여러 가지 예제입니다. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> </blockquote> 예제 1 blockquote { border: 1px solid #27a9e3; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; border-left: 10px solid #27a9e3; } 예제 2 blockquote:before { ...

CSS / 배경색만 투명하게 만들기

CSS / 배경색만 투명하게 만들기

배경과 내용의 투명도 CSS의 opacity 속성으로 요소의 투명도를 정할 수 있습니다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 간단한 예제는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { ...

CSS / Flex / justify-content

CSS / Flex / justify-content

justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...

CSS / 기초 / 문법

CSS / 기초 / 문법

문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다. 즉, CSS 코드는 다음처럼 구성됩니다. selector ...

CSS / 체크박스 꾸미는 방법

CSS / 체크박스 꾸미는 방법

체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다. 체크박스 만들기 빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨을 연결시켜야 합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...