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 / border-style / 테두리 모양을 정하는 속성

CSS / border-style / 테두리 모양을 정하는 속성

개요 border-style은 테두리(border)의 모양을 정하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 border-style은 border-top-style, border-right-style, border-bottom-style, border-left-style의 축약형입니다. 문법 border-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. initial과 ...

CSS / background-image / 배경 이미지 정하는 속성

CSS / background-image / 배경 이미지 정하는 속성

개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...

CSS / content / 요소 앞 또는 뒤에 문자열 등 콘텐트 만들기

CSS / content / 요소 앞 또는 뒤에 문자열 등 콘텐트 만들기

content 속성은 선택한 요소의 내용 앞이나 뒤에 콘텐트를 붙입니다. 예를 들어 p 요소 내용 앞에 콘텐트를 넣으려면 p:before { content: xxx; } 와 같이 하고, 뒤에 붙이려면 p:after { content: xxx; } 와 같이 합니다. content 속성을 이용하여 XXX라는 문자열을 넣으려면 다음과 같이 합니다. p:before { content: "XXX"; } 이미지를 넣고 싶다면 다음과 같이 합니다. p:before { content: ...

CSS / counter-reset, counter-increment로 일련 번호 붙이기

CSS / counter-reset, counter-increment로 일련 번호 붙이기

CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있습니다. 이때 사용하는 속성은 counter-reset과 counter-increment입니다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다. em – 상위 요소 기준 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 font-size: 1.5em; 은 글자 크기를 상위 요소 크기의 1.5배로 하겠다는 뜻입니다. 간단한 예제를 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / 여백 / padding, margin

CSS / 여백 / padding, margin

여백에는 안쪽여백과 바깥여백이 있습니다. 안쪽여백은 padding 속성으로, 바깥여백은 margin 속성으로 정합니다. 속성값 부여하기 padding과 margin 속성에 값을 부여하는 방법은 다음과 같습니다. padding: xx yy zz ww; margin: xx yy zz ww; xx는 위, yy는 오른쪽, zz는 아래, ww는 왼쪽 여백입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...

CSS / 메모

CSS / 메모

크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; ​} 가변폭 ...

CSS / placeholder의 색, 글자 모양 등 꾸미기

CSS / placeholder의 색, 글자 모양 등 꾸미기

placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다. 다음은 꾸미기 전의 input과 textarea입니다. <!doctype html> <html lang="ko"> <head> ...

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

CSS / font-variant / 소문자를 작은 대문자로 바꾸는 속성

개요 font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-variant: normal | small-caps | initial | inherit normal : 소문자를 작은 대문자로 바꾸지 않습니다. small-caps : 소문자를 작은 대문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype ...

CSS 강좌