开关切换按钮生成器 - iOS/Android风格

生成形似iOS或Android的开关切换按钮，支持动画和自定义颜色。

前端设计 CSS 开关 生成

单选框/复选框美化器 - CSS自定义样式

打造自定义形状和颜色的选择框，生成隐藏原生控件并替换样式的完整代码。

前端设计 CSS 单选框 复选框

内置Web组件演示 - 原生自定义元素

展示一些常用内置HTML元素和自定义元素例子，提供代码复制。

前端设计 Web Components 演示 组件

最新

控制台日志样式生成 - %c美化输出

配置字体、颜色、背景，生成可粘贴到浏览器控制台的%c格式化日志代码。

开发工具 console 日志 样式

最新

纯CSS模态弹窗生成 - 无JS弹出层

利用 `:target` 伪类创建无需JavaScript的弹窗组件，支持关闭按钮和遮罩层。

前端设计 CSS 无JS 模态框

CSS三角形生成器 - 纯CSS三角箭头在线生成

在线生成纯CSS三角形、箭头、气泡指示器，调整方向、大小和颜色，一键复制CSS代码。

前端设计 CSS三角形 前端 生成器

CSS动画生成器 - Keyframes可视化创建

在线CSS动画代码生成工具，可视化定义关键帧、持续时间、缓动函数等，生成@keyframes动画CSS。

前端设计 CSS keyframes 动画 生成器

最新

CSS转Styled Components - 自动生成JS代码

将普通CSS代码转换为Styled Components的模板字符串格式。

开发工具 CSS-in-JS React 转换

最新

CSS自定义属性注册演示 - @property

通过注册CSS属性的类型和初始值，演示如何让渐变等属性实现平滑动画。

前端设计 CSS 动画 自定义属性

精灵帧动画生成器 - 多图播放及CSS动画

上传序列帧图片，合成spritesheet并生成对应CSS steps()帧动画代码。

前端设计 CSS 帧动画 精灵图

最新

形状过渡分割线生成 - 页面区块曲线背景

生成用于网页各区块间的波浪或倾斜过渡分割线，导出为SVG或CSS代码。

前端设计 CSS SVG 分割线

最新

网页CSS变量提取为色板 - 一键查看站点主题色

输入网址，提取页面定义的所有CSS自定义属性（颜色），生成直观调色板。

开发 CSS变量 主题 提取 色板

常用表单片段库 - 登录/注册/搜索等

预置多种常见表单（登录、联系、搜索）的HTML代码，点击即可复制并稍作修改。

开发工具 HTML 模板 表单

HTML转React JSX - 属性转换

将HTML代码转换为兼容React JSX的代码（class→className，style→对象等）。

开发工具 HTML JSX React

流体字体尺寸生成器 - CSS clamp

输入最小视口和最大视口下的字号，生成利用clamp()的流畅缩放字体规则。

前端设计 clamp CSS 流体字体

最新

Popover API 实例展示 - 无JS的弹出层构建

使用原生HTML Popover属性创建提示、菜单与对话框，展示四种触发方式及样式定制。

HTML API HTML Popover 弹出

表单代码生成器 - 拖拽式HTML表单构建

拖拽文本框、下拉框、单选复选等元素，排列组成表单，导出整洁的HTML表单结构代码。

前端设计 HTML 生成器 表单

最新

CSS 文字装饰在线编辑器 - 下划线/删除线/波浪线样式定制

调整 text-decoration-line、style、color、thickness 等属性，实时预览文字装饰效果并生成代码。

开发工具 CSS 文字装饰 样式 编辑器

滚动条样式预览 - Webkit滚动条美化与代码

交互式调整滚动条宽度、滑块颜色、圆角等，预览容器滚动效果，复制::-webkit-scrollbar代码。

前端设计 CSS 滚动条 美化

加载打字动画生成 - 三点跳跃CSS

生成经典的“...”打字机加载动画，可定颜色和大小，纯CSS实现。

前端设计 CSS 加载 动画

最新

GIF分解精灵图导出 - 提取单帧和CSS定位

上传GIF并自动水平平铺提取各帧，生成对应的CSS精灵图定位代码。

图像工具 GIF 分解 精灵图

CSS图案生成器 - 条纹/格子/圆点背景代码

选择条纹、网格、波点等预设图案，调节颜色和尺寸，生成纯CSS background代码。

前端设计 CSS图案 生成器 背景

最新

DOM元素截图工具 - 指定区域导出图片

选中页面上的某个HTML元素，利用html2canvas将其渲染为PNG图片下载。

实用工具 DOM 导出 截图

滑动下划线动画生成器 - 菜单悬停特效CSS

配置下划线从中间或一侧滑出的动画，生成无限菜单效果代码。

前端设计 CSS 下划线 动画

最新

浏览器标签页预览模拟 - 切换主题

设置浏览器标题和图标，模拟在暗色/亮色主题下标签栏的样子。

前端设计 标签 模拟 浏览器

渐变色标数据表 - CSV数据生成渐变CSS

使用CSV格式定义多个色标的位置和颜色，批量生成复杂的CSS渐变代码。

前端设计 CSS 渐变 色标

HTML转Pug工具 - 在线HTML代码转简洁模板

将HTML标记转换为Pug（原Jade）的缩进语法模板，去除尖括号，让模板开发更快速。

开发工具 HTML Pug 转换

社交分享按钮生成器 - 多平台分享链接代码

选择平台和分享参数，生成分享到Twitter、Facebook、WhatsApp等的URL链接及按钮。

开发工具 分享按钮 生成器 社交

最新

CSS动画录制器 - 拖拽元素生成关键帧代码

在时间轴上拖拽一个元素的位置和样式，自动录制并生成对应的CSS @keyframes动画代码。

前端设计 CSS动画 关键帧 录制

轮播图代码生成器 - 滑动幻灯片HTML/JS

拖拽添加图片与文字，生成响应式轮播图Slider，支持自动播放和导航点，提供HTML/CSS/JS代码。

前端设计 Carousel 生成器 轮播图