CSS Triangle Generator - Online Pure CSS Shapes Creator
Generate CSS-only triangles by configuring direction, size, and color. Copy the CSS snippet. Useful for creating speech bubbles and navigation arrows.
UD5 Toolkit
Click any symbol to copy its LaTeX command โ browse 190+ symbols across 10 categories
No symbols found
Try a different search term or browse by category
\alpha, \sum, or \int are the gold standard for writing math in research papers, theses, and textbooks. They're also supported by MathJax and KaTeX for rendering math on the web, making them essential for anyone writing technical content online.
$...$ for inline math (e.g., $\alpha + \beta = \gamma$) or \[...\] / $$...$$ for display math on its own line. For web pages, include MathJax or KaTeX in your HTML, then use the same delimiters. Simply copy the command from this tool โ click any symbol card โ and paste it into your editor, Markdown file, or CMS.
\alpha and press Space to convert it. Google Docs supports LaTeX via Insert โ Equation, and you can type backslash commands directly. For both, the commands on this page work as a quick reference. You can also use add-ons like "Auto-LaTeX Equations" for Google Docs to render full LaTeX blocks.
$...$) places mathematical expressions within a line of text โ symbols are rendered smaller to fit the line height. Display math (using \[...\] or $$...$$) places the expression on its own centered line with larger symbols, ideal for important equations. Some commands like \sum and \int render differently in each mode: in inline mode, limits appear as subscripts/superscripts, while in display mode they appear above and below the symbol.
\phi renders as ฯ in LaTeX but as ฯ in some fonts). The LaTeX command itself is what matters โ when you paste it into a LaTeX editor or MathJax/KaTeX environment, it will render with the correct typography. This reference prioritizes accurate LaTeX commands over pixel-perfect previews.
Generate CSS-only triangles by configuring direction, size, and color. Copy the CSS snippet. Useful for creating speech bubbles and navigation arrows.
Create a Svelte singleโfile component with script, style, and markup. Choose TypeScript or JavaScript. Copy the .svelte file.
Create all kinds of CSSโonly triangles (up, down, left, right, equilateral). Adjust color and size. Grab the code.
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Convert an SVG into a named React component with TypeScript. Clean attributes and add props. Dev tool.
Write a JavaScript snippet and get a readyโtoโdrag bookmarklet link. With minification and encoding. Easy browser tools.
Browse a collection of common UI components (cards, modals, navbars) built with pure CSS. Preview and copy the HTML/CSS. Fast prototyping.
Choose a base style guide (Airbnb, Standard, Google) and add plugins. Generate a readyโtoโuse .eslintrc config.
Create circular and elliptical clip paths visually. Adjust radius and position. Copy the CSS. For avatars and masks.
Paste Jira/Confluence wiki markup and get a rendered HTML preview. Supports headings, lists, links, and code blocks. All local.
Write a standard README with preโfilled sections like Installation, Usage, and License. Export as Markdown. Save time.
Paste code and get a beautifully highlighted preview with line numbers. Supports many languages. Copy as HTML. Pure frontend.
Create gradientโfilled text with the backgroundโclip property. Choose linear or radial gradients. Get the CSS. Modern typography.
Write a module and import it. See how browser handles module scripts. Learn modern JS structure.
Paste an SVG and convert it into a readyโtoโuse React functional component with proper JSX. CamelCase attributes. Local.
Pick an emoji and get the exact CSS content property value with escaped Unicode. For inserting emojis via CSS.
Drag points to create a custom clipโpath shape. See the CSS value update live. For creating nonโrectangular elements.
Type text and instantly see it rendered with textโtransform: uppercase, lowercase, capitalize, and fullโwidth. Copy CSS.
Make your JavaScript code more readable with this online beautifier. Format and indent JS automatically. Works entirely in your browser, protecting your code privacy.
Define brand colors, fonts, and spacing. Generate the Chakra UI extendTheme object. Export as JSON or JavaScript.
Visually create beautiful linear and radial gradients. Get the CSS code instantly. Copy the code or export as image. Perfect for web designers.
Add rows and columns, merge cells, and set gaps visually. Get the gridโtemplate CSS and HTML. Fast layout prototyping.
Style the <progress> and <meter> elements with crossโbrowser CSS. Adjust colors and sizes. Copy the final styles.
Visually apply CSS transform functions like rotate, scale, skew, and translate. Obtain the exact CSS code for your elements. No coding needed.
Hash any text using simple, fast algorithms: DJB2, SDBM, or CRC32. Get integer or hex. For quick lookups. Local.
Just a deadโsimple tool to convert any text to UPPER CASE. Fast, no ads, all local. Also offers lower and title case.
Paste an SVG and convert it to a React Native component using reactโnativeโsvg elements. For mobile apps. Local.
Shows the decimal and hex code point for every character in a string, including emojis. Copy as array. Dev reference.
Press any key combination and see the humanโreadable shortcut for macOS and Windows. Developer docs helper.
Add floating emoji reactions (like live streams) to any screenshot or photo. Export as still image. Fun social media tool.