icon에 drop-shadow를 하려고 했는데
속성을 부여하는 이미지에 따라 shadow가 결정돼서
아주 얇고 작은 아이콘에 확실한 효과를 주려니 투명도가 없어도 너무 희미했다.
그래서 배경을 원형 그라데이션으로 줄 수 있는 방법이 없나 찾아보다 발견하게 되었다.
Radial Gradient
radial-gradient() - CSS: Cascading Style Sheets | MDN
The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the <gradient> data type, whic
developer.mozilla.org
해결법) 다른 속성처럼 animation을 주었을 때 효과가 smooth하지 않고, 뚝뚝 끊기는 현상을 발견
CSS animation not smooth with radial-gradient background
I am trying to create a pulsating circular background with smooth edges. For the circle with smooth edges I am using this CSS code: background: radial-gradient(black, black, transparent, transpare...
stackoverflow.com
ref.
Gradient
<gradient> - CSS: Cascading Style Sheets | MDN
The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.
developer.mozilla.org
Linear Gradient
linear-gradient() - CSS: Cascading Style Sheets | MDN
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.
developer.mozilla.org
그라데이션을 이용할 수 있는 다양한 방법들
Using CSS gradients - CSS: Cascading Style Sheets | MDN
CSS gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more colors. You can choose between three types of gradients: linear (created with the linear-gradient() function), radial
developer.mozilla.org
그라데이션 쉽게 만들어주는 사이트
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
'A-HA💡 > CSS' 카테고리의 다른 글
| [CSS] JS에서 CSS 변수(사용자 정의 속성) 설정하는 방법 (0) | 2024.04.24 |
|---|---|
| [CSS] CSS, SASS, SCSS, LESS (0) | 2024.01.30 |
| [CSS] 반응형 (1) | 2024.01.22 |
| [CSS] 네이밍 (0) | 2023.11.07 |
| [CSS] 형제 결합자 of 선택자 (0) | 2023.10.23 |