ํˆด์Šค๋ชจ์•„

CSS Filter Generator

CSS filter ์†์„ฑ์„ ์‹œ๊ฐ์ ์œผ๋กœ ์ƒ์„ฑํ•˜๊ณ  ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Filter ์„ค์ •
๊ฐ ํ•„ํ„ฐ ์†์„ฑ์„ ์กฐ์ •ํ•˜์„ธ์š”
ํ”„๋ฆฌ์…‹
๋ฏธ๋ฆฌ ์ •์˜๋œ ํ•„ํ„ฐ ์Šคํƒ€์ผ์„ ์‚ฌ์šฉํ•ด๋ณด์„ธ์š”
๋ฏธ๋ฆฌ๋ณด๊ธฐ
๊ธฐ๋ณธ ์ด๋ฏธ์ง€์— ์ƒ์„ฑ๋œ ํ•„ํ„ฐ ํšจ๊ณผ๋ฅผ ํ™•์ธํ•˜์„ธ์š”

์›๋ณธ

Windows XP Bliss ๋ฐฐ๊ฒฝํ™”๋ฉด

ํ•„ํ„ฐ ์ ์šฉ

ํ•„ํ„ฐ ์ ์šฉ๋œ Windows XP Bliss ๋ฐฐ๊ฒฝํ™”๋ฉด
Filter Preview
์ƒ์„ฑ๋œ CSS
filter: none;
CSS Filter ํ•จ์ˆ˜ ์„ค๋ช…

์‹œ๊ฐ์  ํšจ๊ณผ

  • โ€ข blur(px): ํ๋ฆผ ํšจ๊ณผ
  • โ€ข brightness(%): ๋ฐ๊ธฐ ์กฐ์ •
  • โ€ข contrast(%): ๋Œ€๋น„ ์กฐ์ •
  • โ€ข opacity(%): ํˆฌ๋ช…๋„ ์กฐ์ •

์ƒ‰์ƒ ํšจ๊ณผ

  • โ€ข grayscale(%): ํ‘๋ฐฑ ํšจ๊ณผ
  • โ€ข hue-rotate(deg): ์ƒ‰์กฐ ํšŒ์ „
  • โ€ข invert(%): ์ƒ‰์ƒ ๋ฐ˜์ „
  • โ€ข saturate(%): ์ฑ„๋„ ์กฐ์ •
  • โ€ข sepia(%): ์„ธํ”ผ์•„ ํšจ๊ณผ

์‚ฌ์šฉ ํŒ

  • โ€ข ์—ฌ๋Ÿฌ ํ•„ํ„ฐ๋ฅผ ๊ณต๋ฐฑ์œผ๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ์กฐํ•ฉ ๊ฐ€๋Šฅ
  • โ€ข ์ด๋ฏธ์ง€๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ชจ๋“  HTML ์š”์†Œ์— ์ ์šฉ ๊ฐ€๋Šฅ
  • โ€ข CSS ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์—ฌ ๋™์  ํšจ๊ณผ ์ƒ์„ฑ
  • โ€ข backdrop-filter๋กœ ๋ฐฐ๊ฒฝ์—๋งŒ ํ•„ํ„ฐ ์ ์šฉ ๊ฐ€๋Šฅ