Code Screenshot Generator - Online Carbon Code Image Maker
Create beautiful, syntax-highlighted screenshots of your code snippets. Choose themes and export as PNG. All client-side canvas rendering.
UD5 Toolkit
Generate uniform code style configurations for your project. Compatible with all major editors & IDEs.
.editorconfig file placed in your project root, which editors read to automatically apply settings like indentation style, line endings, charset, and more. It's supported by over 30+ editors including VS Code, IntelliJ, Sublime Text, and Vim.
.editorconfig file in the root directory of your project. Editors will automatically search for it by traversing up the directory tree from the file being edited. If you set root = true, the search stops at that file, preventing conflicts with parent directory configurations.
root = true tells editors that this .editorconfig file is the top-most configuration. Editors will stop searching for parent .editorconfig files in upper directories. This is useful for monorepos or when you want to ensure your project's settings aren't overridden by a global config in your home directory.
.gitignore. The pattern [*] matches all files, [*.js] matches all JavaScript files, and [*.{js,ts}] matches both .js and .ts files. Rules are applied in order from top to bottom, with later matching rules overriding earlier ones for the same file.
[*] section for defaults, then add specific sections like [*.py] for Python (4-space indentation per PEP8), [Makefile] for tab-indented Makefiles, or [*.md] for Markdown files with different whitespace rules. Use our generator above to easily manage multiple file type rules.
indent_size defines how many spaces are used for indentation when indent_style = space. tab_width controls how wide a tab character appears visually in the editor (usually relevant when indent_style = tab). If you use spaces for indentation, you mainly need indent_size; if you use tabs, set tab_width to define the visual width.
.editorconfig file to any existing project. It helps standardize code style for all contributors going forward. For legacy codebases, consider applying settings gradually or using trim_trailing_whitespace = false initially to avoid massive diff changes, then enable it later after cleanup.
indent_style — space | tabindent_size — positive integertab_width — positive integerend_of_line — lf | crlf | crcharset — utf-8 | utf-8-bom | utf-16be | utf-16le | latin1trim_trailing_whitespace — true | falseinsert_final_newline — true | falsemax_line_length — positive integerroot — true | false (top of file only)Create beautiful, syntax-highlighted screenshots of your code snippets. Choose themes and export as PNG. All client-side canvas rendering.
Load images or use colors and apply all 15 CSS blend modes. Visual tester for creative effects.
Generate standard 1D barcodes including CODE128, EAN-13, and UPC-A. Download as image for product labeling or inventory. All processing happens locally.
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Select character sets (Latin, Cyrillic, Greek) and generate the exact unicode‑range descriptor for your fonts. Improve performance.
Create outlined text with the text‑stroke property. Adjust width and color. Preview and copy the CSS.
Create a 'SALE' or 'NEW' corner ribbon in pure CSS. Adjust colors, position, and text. Great for e‑commerce.
Create a simple 4-shaft weaving draft by clicking warp/weft threads. See plain weave, twill, satin. Educational for weavers. Local only.
Use isolation: isolate to contain mix‑blend‑mode and filters. See the visual difference with and without. Quick demo.
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.
Generate a random HTML/CSS card with different box model properties. Inspect and guess the size. For learners.
Design neumorphic elements by adjusting box‑shadow parameters. Real‑time preview and CSS output. For modern soft UI interfaces.
Generate Lorem Ipsum placeholder text for your designs and mockups. Specify paragraphs, words, or bytes. Produce classic or custom dummy content instantly.
Create inner shadows for a pressed or sunken effect. Visually adjust and copy the CSS. Learn inset.
Paste code and generate a beautiful, syntax‑highlighted PNG image. Choose theme and window style. Shareable code pics.
Interactively add and adjust multiple box shadows on a sample element. Drag sliders for offset, blur, spread, and color. Copy the clean CSS code instantly.
Visually design a custom :focus‑visible outline style. Copy the CSS. Better than the default.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Paste your CSS and see warnings for properties that have limited browser support. Links to CanIUse. Modernize safely.
Paste HTML/CSS snippets or enter properties to test how z‑index and stacking contexts interact. Real‑time example.
Set width, height, depth, and colors to generate an isometric box using CSS transforms. Copy to your project.
Fill in your details and instantly get a clean, printable one-page resume. No sign up, no data leaves your browser.
Design a tooltip that appears on hover without JavaScript. Choose positioning, arrow, and animation. Copy the clean HTML/CSS.
Generate a React custom hook boilerplate with state, effect, and cleanup. Pick the pattern and copy.
Convert TOML configuration files to equivalent YAML with perfect structure preservation. Fast and local.
Fill in a form to generate a clean, ATS‑friendly one‑page resume. Customize sections, colors, and export as print‑ready PDF. Personal data stays in your browser.
Convert 3-digit capacitor codes (like 104, 222) to capacitance value in pF, nF, µF. Also converts back. Useful for reading tiny ceramic capacitors.
Define password rules and see a live checklist that updates as you type. Design better password UX for your app.
See the difference between clone and slice on inline boxes that break across lines. Useful for multi‑line headings.