CSS 渐变生成器
使用两种颜色和角度生成 CSS linear-gradient/radial-gradient 代码，实时预览效果并提供中间色信息。所有处理均在浏览器中完成。
输入
结果
- CSS
- background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
- 中间色
- #a857c5
常见问题
각도는 어떤 방향인가요?
CSS 각도는 0°가 아래→위, 90°가 왼쪽→오른쪽, 180°가 위→아래 방향입니다. 대각선 그라디언트는 45° 또는 135°를 많이 씁니다.
3색 이상 그라디언트도 만들 수 있나요?
생성된 코드에 색상 정지점을 직접 추가하면 됩니다. 예: linear-gradient(90deg, #a 0%, #b 50%, #c 100%). 중간색 값을 50% 지점에 넣으면 자연스러운 3색 그라디언트가 됩니다.
그라디언트가 계단처럼 끊겨 보여요.
명도 차이가 큰 두 색을 넓은 영역에 펼치면 밴딩이 생길 수 있습니다. 중간 색상 정지점을 추가하거나 색상 차이를 줄이면 완화됩니다.
相关工具
CSS 阴影生成器 (box-shadow)
调节偏移、模糊、扩散、颜色和不透明度生成 CSS box-shadow 代码，并实时预览效果。支持 inset 内阴影。所有处理均在浏览器中完成。
颜色明暗生成器
从基准色生成由浅到深的 HEX 调色板，适合制作设计系统的色阶。所有处理均在浏览器中完成。
颜色转换器
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
颜色对比度检查器
计算文字与背景颜色的对比度，并判定是否符合 WCAG 2.x AA/AAA 无障碍标准。所有计算均在浏览器中完成。
CSS clamp() 生成器
根据尺寸和视口范围生成响应式 clamp() 代码，无需媒体查询即可实现随屏宽平滑变化的流式排版。所有计算均在浏览器中完成。
CSS 压缩器
去除 CSS 中的注释和多余空白以减小体积，同时保留字符串值。所有处理均在浏览器中完成。