运行工具
本工具为网页开发者提供标准的 Instagram 风格 CSS 滤镜定义。您无需手动编写复杂的样式组合，只需选择或输入滤镜名称，即可获取对应的 CSS filter 属性代码。系统支持包括 Clarendon、Gingham、Lark、Reyes、Juno、Valencia、X-Pro II、Willow 和 Nashville 在内的多种经典滤镜。这些效果通过亮度、对比度、饱和度、色相旋转、褐变或灰度等 CSS 函数的组合实现。若未指定名称或输入未知名称，系统将默认返回标准无滤镜状态。生成的代码可直接嵌入您的样式表，帮助您在网页项目中快速复现社交媒体风格的视觉体验。适用于前端原型设计、UI 组件库构建及静态页面美化场景。请注意，本工具仅提供代码定义，不涉及图片像素处理或实时预览功能。
使用说明
- 在“滤镜名称”输入框中输入所需的滤镜英文名（如 clarendon），或留空以使用默认值。
- 点击运行按钮，系统将检索对应的 CSS 滤镜定义。
- 在结果区域查看生成的 CSS filter 属性值及描述文本。
- 复制结果中的 CSS 代码，将其粘贴到您的网页样式表中。
- 将应用该样式的 HTML 元素进行刷新，以查看视觉效果。
示例
- 输入“juno”，获取用于模拟 Juno 滤镜的 CSS 代码，通常包含轻微的色相旋转和饱和度调整。
- 留空不填，获取“normal”状态的输出，即不包含任何 CSS filter 属性的默认样式。
常见问题
支持的滤镜名称有哪些？
目前支持 normal, clarendon, gingham, lark, reyes, juno, valencia, xpro2, willow, nashville。输入其他名称将自动回退到 normal。
这个工具可以直接编辑我的图片吗？
不能。本工具仅生成 CSS 代码定义。您需要将这些代码应用到网页中的图片元素上，由浏览器渲染出滤镜效果。
如果我拼错了滤镜名称会怎样？
如果输入的名称不在支持列表中，系统会自动将其替换为 normal，并返回无滤镜的 CSS 定义，不会报错。
生成的 CSS 代码兼容哪些浏览器？
生成的代码使用标准的 CSS filter 属性，现代浏览器（如 Chrome, Firefox, Safari, Edge）均广泛支持。