Ted's Codding study

원형 그라데이션(radial-gradient) 본문

CSS

원형 그라데이션(radial-gradient)

Ted93 2024. 4. 21. 20:09

😁 학습을 위해서 공부는 했지만, 개인적으로는… 잘 안 쓸 것 같습니다 (요즘 트렌드에는 맞지 않는 것 같습니다)

radial-gradient() 함수 사용

중심점에서 시작하여 원형으로 색상이 전환되는 방식

  • 기본 구문
radial-gradient(shape size at position, start-color, ..., last-color);

 

  • 사용 디테일
shape: 그라데이션의 모양 지정 (circle(원) 또는 ellipse(타원)) 
size: 그라데이션의 크기 지정 (예: closest-side, farthest-corner) 
position: 그라데이션 중심의 위치 지정 (예: center, 50% 50%)

EX) background: radial-gradient(circle, yellow, purple); 
(중앙에서 밖으로 노란색에서 보라색으로 변하는 원형 그라데이션)

 

radial-gradient

 

전체 소스 코드 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }

    div {
      width: 60%;
      height: 20%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      border-radius: 10px;
      margin: 10px 0;
    }

    .radial-gradient {
      background: radial-gradient(circle, yellow, purple)
    }
    .radial-gradient2 {
      background: radial-gradient(closest-side at 60% 55%, yellow, purple);
    }
    .radial-gradient3 {
      background: radial-gradient(ellipse, yellow, purple);
    }
    .radial-gradient4 {
      background: radial-gradient(farthest-side at 60% 55%, yellow, purple);
    }
  </style>
</head>
<body>
  <div class="radial-gradient">background: radial-gradient(circle, yellow, purple);</div>
  <div class="radial-gradient2">background: radial-gradient(closest-side at 60% 55%, yellow, purple);</div>
  <div class="radial-gradient3">background: radial-gradient(ellipse, yellow, purple);</div>
  <div class="radial-gradient4">background: radial-gradient(farthest-side at 60% 55%, yellow, purple);</div>
</body>
</html>

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/radial-gradient-dbc124aba6334f059c070e582e0e7841?pvs=4

 

원형 그라데이션(radial-gradient) | Notion

학습을 위해서 공부는 했지만, 개인적으로는… 잘 안 쓸 것 같습니다 (요즘 트렌드에는 맞지 않는 것 같습니다)

short-echidna-b16.notion.site

 

저작자표시 비영리 변경금지
'CSS' Related Articles more