🎨 CSS实时编辑器

在线编写CSS样式，实时预览效果 · 支持语法高亮、颜色选择器

左侧编辑CSS代码，右侧实时预览效果。内置HTML模板供样式测试，支持下载和复制。

常见问题

这个工具完全免费吗？
是的，本工具100%免费，无需注册、无使用次数限制。
代码会被上传吗？
不会。所有代码都在浏览器本地运行，不会上传到任何服务器。
支持CSS3特性吗？
支持。包括Flexbox、Grid、动画、渐变、阴影、过渡等所有现代CSS特性。
可以修改HTML模板吗？
可以。左侧编辑区上方有HTML模板标签，你可以切换到HTML标签修改模板内容。
在手机上能用吗？
可以，但桌面端体验更佳。

相关工具

HTML编辑器 CSS压缩 CSS渐变生成器 阴影生成器 颜色转换
`; function updatePreview(){ const doc=iframe.contentDocument||iframe.contentWindow.document; doc.open();doc.write(baseHTML.replace('RESET_CSS',editor.value));doc.close(); } function downloadCSS(){ const blob=new Blob([editor.value],{type:'text/css;charset=utf-8'}); const a=document.createElement('a');a.href=URL.createObjectURL(blob); a.download='styles.css';a.click();URL.revokeObjectURL(a.href); } function copyCode(){ navigator.clipboard.writeText(editor.value).then(()=>{ const btn=document.querySelector('.btn-outline:last-child'); const orig=btn.textContent;btn.textContent='✅ 已复制!'; setTimeout(()=>btn.textContent=orig,2000); }); } editor.addEventListener('input',updatePreview); updatePreview();