CSS Modules Class Name Generator - Online Scoped Styles
Write global CSS and auto‑generate unique, scoped class names with source maps. Understand CSS Modules naming.
UD5 Toolkit
Quickly generate a valid .stylelintrc.json configuration. Choose a preset, override rules as needed, and copy or download the resulting config.
Leave a rule as Inherit to use the default from the extended configuration. Select Off, Warning or Error to override. If a rule accepts options, an input field will appear when applicable.
.stylelintrc.json file in your project root, or reference it directly from your package.json. Then install the required presets (e.g., stylelint-config-standard) and run Stylelint via CLI or integrate it into your build tools like webpack, Gulp, or your code editor.
stylelint-config-recommended) only enables rules that catch possible errors. The Standard preset (stylelint-config-standard) extends recommended and additionally enforces common stylistic conventions (like indentation, quotes, spacing). Use Standard for a full‑featured starting point, or Recommended if you only want error checking.
"extends": ["stylelint-config-standard", "./my-custom-config"]. Later configs override earlier ones. This generator currently supports a single string, but you can manually edit the output file to add more.
ignoreFiles array in your Stylelint config to ignore whole directories or patterns. For inline ignores, use /* stylelint-disable-next-line */. This generator focuses on rules; add ignoreFiles manually after downloading the file.
Write global CSS and auto‑generate unique, scoped class names with source maps. Understand CSS Modules naming.
Build a custom CSS reset by toggling which elements to normalize. Copy the resulting stylesheet. Lean and clean.
Compile LESS code to plain CSS in your browser. Check for syntax errors and get clean output. For legacy projects.
Write scoped CSS rules that apply only within a subtree. See the boundary limits and avoid naming conflicts. New browser feature.
Build a complete font‑stack for your website. Choose a primary font and get the best fallback options for different OS. Copy the CSS.
Paste CSS with vendor prefixes and get a clean version with only the standard property. Modernize your stylesheets.
Style the notoriously hard file input. Generate a consistent button with preview. Copy the HTML/CSS.
Design beautiful buttons with gradients, shadows, and hover/active effects. No JavaScript required. Copy the CSS.
Paste your SCSS or Sass code and compile it to standard CSS. Basic sass.js engine runs in your browser. No server.
Toggle common print styles: remove backgrounds, hide elements, set page margins, and add page breaks. Get the complete @media print block.
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
Write CSS like `oklch(from red l c h)` to modify colors. Preview the output and copy. Modern color manipulation.
Compile SCSS code to CSS directly in the browser using the official Sass.js library. Supports variables, mixins, nesting. No server upload required.
Design a fully styled scrollbar with colors, width, radius, and hover effects. Supports both ::-webkit‑scrollbar and Firefox scrollbar‑width.
Paste or upload an SVG and convert it into a CSS background‑image data URI. Clean and ready to embed.
Browse a collection of common UI components (cards, modals, navbars) built with pure CSS. Preview and copy the HTML/CSS. Fast prototyping.
Pick a target, module system, and strictness. Generate a custom tsconfig.json for your project. No more copy‑paste.
Design a modern button with gradients, shadows, and hover effects. Copy the clean CSS code.
Select PostCSS plugins (Autoprefixer, nesting, custom‑media) and generate a postcss.config.js file. Streamline your CSS pipeline.
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Pick an emoji and get the exact CSS content property value with escaped Unicode. For inserting emojis via CSS.
Pick a COLRv1 color font and change its palette with font‑palette. Create custom palettes with @font‑palette‑values.
Add multiple CSS filters (grayscale, blur, hue‑rotate) to an image. See the combined effect. Copy the CSS filter value.
Choose from a dozen pure CSS loading spinners. Customize color, size, and speed. Copy the HTML & CSS. No JavaScript needed.
Write CSS like `oklch(from red l c h)` to modify colors dynamically. Preview the output and copy the code.
Create all kinds of CSS‑only triangles (up, down, left, right, equilateral). Adjust color and size. Grab the code.
Visually apply CSS transform functions like rotate, scale, skew, and translate. Obtain the exact CSS code for your elements. No coding needed.
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.
Pick two colors and mix them in different color spaces with sliders. See the difference between sRGB and OKLCH mixing. Copy the code.
Design a custom focus indicator with outline, offset, and box‑shadow. Preview on interactive elements. Copy the CSS.