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.
Choose a base style guide (Airbnb, Standard, Google) and add plugins. Generate a ready‑to‑use .eslintrc config.
Style the <progress> and <meter> elements with cross‑browser CSS. Adjust colors and sizes. Copy the final styles.
Build CSS Grid layouts by defining columns, rows, and gaps visually. Get the complete grid CSS code. An essential web design tool running in the browser.
Write scoped CSS rules that apply only within a subtree. See the boundary limits and avoid naming conflicts. New browser feature.
Visually create beautiful linear and radial gradients. Get the CSS code instantly. Copy the code or export as image. Perfect for web designers.
Toggle common print styles: remove backgrounds, hide elements, set page margins, and add page breaks. Get the complete @media print block.
Design beautiful buttons with gradients, shadows, and hover/active effects. No JavaScript required. Copy the CSS.
Choose from a dozen pure CSS loading spinners. Customize color, size, and speed. Copy the HTML & CSS. No JavaScript needed.
Style the notoriously hard file input. Generate a consistent button with preview. Copy the HTML/CSS.
Compile LESS code to plain CSS in your browser. Check for syntax errors and get clean output. For legacy projects.
Interactively apply CSS filter functions (blur, brightness, contrast, etc.) to an image and copy the resulting filter property. No coding required.
Paste or upload an SVG and convert it into a CSS background‑image data URI. Clean and ready to embed.
Set column‑count, gap, and rule, and see a multi‑column text layout. Copy the minimal CSS. For magazine designs.
Create a multi‑column text layout with adjustable column count, gap, and rule. Copy the CSS. Elegant reading experience.
Visually apply CSS transform functions like rotate, scale, skew, and translate. Obtain the exact CSS code for your elements. No coding needed.
Create gradient‑filled text with the background‑clip property. Choose linear or radial gradients. Get the CSS. Modern typography.
Make your JavaScript code more readable with this online beautifier. Format and indent JS automatically. Works entirely in your browser, protecting your code privacy.
Browse a collection of common UI components (cards, modals, navbars) built with pure CSS. Preview and copy the HTML/CSS. Fast prototyping.
Write CSS like `oklch(from red l c h)` to modify colors. Preview the output and copy. Modern color manipulation.
Pick two images or colors and apply all 16 CSS mix‑blend‑mode values live. See and copy the right CSS for your design.
Paste your SCSS or Sass code and compile it to standard CSS. Basic sass.js engine runs in your browser. No server.
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Pick a COLRv1 color font and change its palette with font‑palette. Create custom palettes with @font‑palette‑values.
Pick an emoji and get the exact CSS content property value with escaped Unicode. For inserting emojis via CSS.
Create all kinds of CSS‑only triangles (up, down, left, right, equilateral). Adjust color and size. Grab the code.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Compile SCSS code to CSS directly in the browser using the official Sass.js library. Supports variables, mixins, nesting. No server upload required.
Add multiple CSS filters (grayscale, blur, hue‑rotate) to an image. See the combined effect. Copy the CSS filter value.
Create an import map JSON with CDN links. Use bare specifiers like `import React from 'react'` without bundlers.