개발

CSS 그라데이션, 그림자 시뮬레이터 사이트

September 30, 2024

가끔 퍼블지원 하다가 그라데이션이나 그림자 시뮬레이터로 빠르게 제작할때 보는 사이트들을 나열해 보았다.

CSS 그라디언트

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

https://cssgradient.io/

웹페이지에서 직관적으로 그라데이션을 시각화하고 그 코드를 얻어낼 수 있는 사이트이다.

공대감성보다는 디자인 감성으로 만들어진 사이트인데, 간단한 리니어 그라이데이션과 중간중간에 브레이크 포인트 넣기 편하게 설계 되어있다.

CSS BOX SHADOW GENERATOR | An easy to use tool that allows you to generate ready CSS rules. Adjust values and copy the finished code.

https://cssgenerator.pl/en/box-shadow-generator/

이번엔 박스 그림자를 직관적으로 제어할 수 있는 페이지이다.

슬라이더를 이리저리 움직이면서 내가 원하는 모양이 될때까지 변경한 후 코드를 복사해 사용할 수 있다.

다만 정확한 값까지 설정하려하지말고 그림자가 적용이된 코드 껍데기를 얻은 후 자기가 사용할 CSS에서 미세조정하는게 더 정확하다.

#유용한사이트

0 개의 댓글

개발 카테고리의 다른 글