무료 디자인·CSS 도구

Aspect Ratio Calculator Design Calculate reduced aspect ratios and CSS aspect-ratio snippets for images, cards, and video boxes. Color Token Generator CSS Convert a list of HEX colors into CSS variables and JSON-style design tokens. CSS Grid Generator CSS Generate CSS Grid template code from column count, gap, and minimum column width. Flexbox Generator Design Generate Flexbox CSS from direction, alignment, wrapping, and gap settings. CSS Clamp Generator CSS Generate responsive CSS clamp() values from minimum and maximum sizes across viewport ranges. Touch Target Size Checker Design Check whether button width, height, and spacing meet comfortable mobile touch-target guidelines. Focus Ring Generator Design Preview accessible keyboard focus ring styles and copy outline and shadow CSS. UI State Color Palette Generator CSS UI State Color Palette Generator supports visual production work with quick previews, CSS-friendly references, and browser-based design helpers. CSS Filter Preview CSS Preview CSS filter values on an uploaded image or sample canvas and copy the generated CSS. SVG Divider Generator Design Generate a wave-style SVG section divider and copy the markup for design layouts. Spacing Scale Generator Design Create a spacing scale for design systems from a base spacing value and step count. Typography Scale Generator Design Generate a typography scale from a base font size and modular ratio. Media Query Generator Design Create responsive CSS media query snippets from breakpoint conditions. Container Query Generator Design Generate CSS container query snippets for component-level responsive layouts. CSS Easing Generator CSS Tune cubic-bezier easing values and copy the transition timing function. CSS Animation Generator CSS Generate simple keyframes CSS for fade and movement animation patterns. Z-index Scale Generator Design Create UI layer z-index tokens for dropdowns, overlays, modals, and toasts. CSS Transform Generator CSS Preview translate, rotate, and scale values and copy the combined transform CSS. CSS Scrollbar Generator CSS Generate custom scrollbar CSS from width, thumb color, track color, and radius settings. Skeleton Loader CSS Generator CSS Create animated skeleton loading CSS for cards, lists, and placeholder UI states. CSS Loading Spinner Generator CSS Generate a simple CSS loading spinner with editable size, color, thickness, and speed. CSS Clip-path Generator CSS Generate clip-path polygon CSS for common decorative UI shapes. CSS Mask Fade Generator CSS Create CSS mask-image fade snippets for scroll areas, image edges, and visual transitions. SVG Optimizer Design Reduce SVG markup by removing comments, metadata, extra whitespace, and optional IDs, then create a data URI. CSS Variable Theme Generator CSS Generate CSS custom properties for brand colors, accent colors, and radius scales. REM and PX Converter Design Convert px and rem values from a chosen root font size for CSS sizing and design-system checks. Viewport Unit Calculator Design Convert vw, vh, vmin, and vmax values into pixel references for a selected viewport size before finalizing responsive layouts. Color Code Converter CSS Convert color values between HEX, RGB, HSL, and other common CSS formats. Color Mixer CSS Mix colors and preview blended values for design and CSS work. Color Palette Generator CSS Generate color palettes for interface, brand, and content design workflows. CSS Gradient Generator CSS Build CSS gradients visually and copy the generated CSS. Contrast Checker Design Check color contrast for readability and accessible interface decisions. Accessible Color Contrast Palette CSS Accessible Color Contrast Palette supports visual production work with quick previews, CSS-friendly references, and browser-based design helpers. CSS Box Shadow Generator CSS Design CSS box shadows and copy production-ready CSS values. CSS Button Styler CSS CSS Button Styler helps you style CSS buttons with quick visual settings before copying the pattern into a page. CSS Border Radius Generator CSS CSS Border Radius Generator helps you tune border-radius values and preview rounded corners before applying them to UI elements. Tailwind Color Chip Checker CSS Tailwind Color Chip Checker helps you review Tailwind-style color chips and references for faster utility class decisions. System Font Stack Generator CSS System Font Stack Generator supports visual production work with quick previews, CSS-friendly references, and browser-based design helpers. Responsive REM and PX Converter Design Convert px and rem values with a configurable root font size for responsive CSS sizing. CSS Shape and Speech Bubble Tail Generator CSS CSS Shape and Speech Bubble Tail Generator helps you generate CSS triangle and shape references for small UI accents without drawing an image. Glass UI CSS Effect Generator CSS Glass UI CSS Effect Generator supports visual production work with quick previews, CSS-friendly references, and browser-based design helpers. Neon and Glow CSS Effect Generator CSS Neon and Glow CSS Effect Generator supports visual production work with quick previews, CSS-friendly references, and browser-based design helpers. Pattern Background Generator Assets Pattern Background Generator helps you generate repeatable pattern background ideas for interface sections and creative layouts. Premium Gradient Preset Collection CSS Premium Gradient Preset Collection helps you browse gold, metallic, or styled gradient references for visual design experiments. Image Color Picker CSS Pick colors from an image and copy useful color values. Image Placeholder Generator Assets Image Placeholder Generator helps you generate image placeholder references for mockups, layouts, and unfinished content blocks. Website Screenshot Mockup Simulator Assets Website Screenshot Mockup Simulator helps you create a browser-based screenshot mockup reference for presenting website visuals. UI Shadow Token Preset Generator CSS UI Shadow Token Preset Generator supports visual production work with quick previews, CSS-friendly references, and browser-based design helpers. CSS Gradient Text Generator CSS CSS Gradient Text Generator helps you browse gold, metallic, or styled gradient references for visual design experiments. Icon Safe Padding Generator Design Icon Safe Padding Generator supports visual production work with quick previews, CSS-friendly references, and browser-based design helpers.