首页Home

🖌️ 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.