🖌️ CSS 生成器CSS Generators
CSS 阴影生成器CSS Box Shadow Generator
可视化调整 CSS box-shadow 阴影效果,实时预览并复制代码。Visually design CSS box-shadow with live preview and copy the code.
CSS 圆角生成器CSS Border Radius Generator
可视化生成 CSS border-radius 圆角代码,可分别设置四个角。Generate CSS border-radius visually, with each corner adjustable.
CSS 渐变生成器CSS Gradient Generator
在线生成 CSS 线性渐变和径向渐变背景代码,支持多色和角度。Create CSS linear and radial gradient backgrounds with multiple colors and angles.
CSS 文字阴影生成器CSS Text Shadow Generator
可视化生成 CSS text-shadow 文字阴影、发光和描边效果。Design CSS text-shadow effects (shadow, glow, outline) visually.
Flexbox 布局生成器CSS Flexbox Generator
可视化学习和生成 CSS Flexbox 布局代码:方向、对齐、换行、间距。Learn and generate CSS Flexbox layouts visually: direction, alignment, wrap, gap.
CSS Grid 布局生成器CSS Grid Generator
可视化生成 CSS Grid 网格布局代码,设置行列数、尺寸和间距。Generate CSS Grid layouts visually — columns, rows, sizes and gaps.
CSS Transform 生成器CSS Transform Generator
可视化生成 CSS transform:旋转、缩放、倾斜、平移,实时预览。Generate CSS transforms — rotate, scale, skew, translate — with live preview.
CSS 滤镜生成器CSS Filter Generator
可视化生成 CSS filter:模糊、亮度、对比度、灰度、色相旋转等效果。Generate CSS filter effects — blur, brightness, contrast, grayscale, hue-rotate and more.
毛玻璃效果生成器Glassmorphism CSS Generator
生成毛玻璃(Glassmorphism)CSS 效果代码:背景模糊、透明度和边框。Generate glassmorphism CSS: backdrop blur, transparency and border.
CSS 三角形生成器CSS Triangle Generator
用纯 CSS border 生成上下左右各方向的三角形箭头代码。Generate pure-CSS triangles (arrows) in any direction using borders.
CSS 按钮生成器CSS Button Generator
可视化设计 CSS 按钮样式:颜色、圆角、内边距、字体和阴影。Design CSS button styles visually: colors, radius, padding, font and shadow.
CSS clip-path 生成器CSS Clip-path Generator
生成 CSS clip-path 形状:三角形、菱形、五边形、六边形、星形、箭头等。Generate CSS clip-path shapes: triangle, rhombus, pentagon, hexagon, star, arrow and more.
渐变文字生成器CSS Gradient Text Generator
生成 CSS 渐变色文字效果代码(background-clip: text)。Generate CSS gradient text (background-clip: text).
CSS 动画曲线生成器CSS Cubic Bezier Generator
生成 CSS transition/animation 的 cubic-bezier 缓动曲线,实时预览动画效果。Create cubic-bezier easing curves for CSS transitions and preview the motion.
PX 与 REM 转换PX to REM Converter
在 px、rem、em 之间互相换算,可设置根字号,附常用尺寸对照表。Convert between px, rem and em with a custom root font size, plus a reference table.
CSS clamp() 响应式字号生成器CSS Clamp Generator (Fluid Typography)
根据最小/最大字号和视口宽度生成 CSS clamp() 流式响应字号代码。Generate CSS clamp() for fluid typography from min/max sizes and viewport widths.
新拟态(Neumorphism)CSS 生成器Neumorphism CSS Generator
生成新拟态风格的柔和阴影 CSS:调节颜色、距离、模糊、强度和凹凸形状,实时预览。Generate soft-UI neumorphism box-shadow CSS with color, distance, blur, intensity and shape, live preview.
CSS 背景图案生成器CSS Background Pattern Generator
用纯 CSS 渐变生成条纹、圆点、棋盘格、网格等背景图案,可调颜色和尺寸,无需图片。Pure-CSS background patterns — stripes, dots, checkerboard, grid — with custom colors and size, no images.
CSS 单位换算(px/rem/em/pt/vw)CSS Unit Converter (px, rem, em, pt, vw)
在 px、rem、em、pt、vw、vh、%、cm、mm、in 之间换算 CSS 长度,可设根字号和视口尺寸。Convert CSS lengths between px, rem, em, pt, vw, vh, %, cm, mm and in with your root font size and viewport.
宽高比计算器Aspect Ratio Calculator
计算宽高比(如 1920×1080 = 16:9),或按比例由新宽度求高度,适用于视频、图片和响应式设计。Find the aspect ratio (1920×1080 = 16:9) or resize by ratio — for video, images and responsive design.
CSS 选择器优先级计算CSS Specificity Calculator
计算 CSS 选择器的优先级(a, b, c),支持 :not()、:is()、:where()、伪元素和属性选择器,批量比较。Calculate CSS selector specificity (a, b, c) including :not(), :is(), :where(), pseudo-elements and attributes.
CSS 加载动画生成器CSS Loader / Spinner Generator
生成纯 CSS 加载动画(旋转圈、跳动圆点、条形、脉冲、双环),可调颜色、大小和速度,复制 HTML+CSS 即用。Pure-CSS loading spinners — ring, bouncing dots, bars, pulse, dual ring — with color, size and speed; copy HTML + CSS.
CSS 动画生成器(@keyframes)CSS Animation Generator (@keyframes)
选择淡入、滑入、弹跳、抖动、脉冲、旋转、缩放等预设,调节时长、缓动、次数和延迟,生成 @keyframes 动画代码并实时预览。Pick fade, slide, bounce, shake, pulse, rotate or zoom presets, tune duration, easing, iterations and delay, and get @keyframes code with a live preview.