# Peasy CSS > CSS tools made easy. Peasy CSS provides free browser-based tools at https://peasycss.com/. All processing happens client-side — files never leave your device. ## Tools (15) - [CSS Minifier](https://peasycss.com/css/css-minify/) — - [CSS Beautifier](https://peasycss.com/css/css-beautify/) — - [CSS Gradient Generator](https://peasycss.com/css/css-gradient/) — - [CSS Box Shadow Generator](https://peasycss.com/css/css-shadow/) — - [CSS Flexbox Generator](https://peasycss.com/css/css-flexbox/) — - [CSS Grid Generator](https://peasycss.com/css/css-grid/) — - [CSS Animation Generator](https://peasycss.com/css/css-animation/) — - [CSS Border Radius Generator](https://peasycss.com/css/css-border-radius/) — - [CSS Text Shadow Generator](https://peasycss.com/css/css-text-shadow/) — - [CSS Transform Generator](https://peasycss.com/css/css-transform/) — - [CSS Unit Converter](https://peasycss.com/css/css-unit-converter/) — Convert between px, rem, em, %, vw, vh, pt, cm, mm, and in - [CSS Color Converter](https://peasycss.com/css/css-color-converter/) — Convert colors between hex, RGB, HSL, HWB, and named CSS colors - [Media Query Generator](https://peasycss.com/css/css-media-query-generator/) — Generate responsive CSS media queries with device presets - [CSS Filter Effects](https://peasycss.com/css/css-filter-effects/) — - [CSS Clip-Path Generator](https://peasycss.com/css/css-clip-path/) — ## Guides (81) - [Color Theory for Digital Design: A Practical Guide](https://peasycss.com/guides/color-theory-digital-design/) — Understanding color theory helps you create visually harmonious designs that communicate effectively. This guide covers color models, harmony rules, accessibility … - [CSS Units Explained: px, em, rem, vh, and When to Use Each](https://peasycss.com/guides/css-units-explained/) — CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units … - [Image Format Comparison: JPEG, PNG, WebP, AVIF, and SVG](https://peasycss.com/guides/image-format-comparison-jpeg-png-webp-avif-svg/) — Comprehensive comparison of image formats for the web. Understand compression algorithms, transparency support, animation capabilities, and browser compatibility to choose … - [CSS Grid vs Flexbox: When to Use Each Layout System](https://peasycss.com/guides/css-grid-vs-flexbox-when-to-use-each/) — End the Grid vs Flexbox debate with clear guidelines. Understand the conceptual differences, when each layout system excels, and how … - [CSS Custom Properties (Variables): A Complete Guide](https://peasycss.com/guides/css-custom-properties-variables-complete-guide/) — Master CSS custom properties — from basic variable usage to advanced patterns like theming, component APIs, and responsive design tokens. … - [CSS Animation Performance: What the Browser Actually Does](https://peasycss.com/guides/css-animation-performance-browser-guide/) — Understand the browser rendering pipeline and which CSS properties can be animated efficiently. Learn why some animations are silky smooth … - [Color Palette Generation Techniques for Web Design](https://peasycss.com/guides/color-palette-generation-techniques/) — Building a cohesive color palette is the foundation of every design project. This guide covers algorithmic and artistic approaches to … - [GIF Creation and Optimization: Size, Quality, and Alternatives](https://peasycss.com/guides/gif-creation-optimization-guide/) — GIFs remain popular for short animations despite their technical limitations. This guide covers creation, optimization, and modern alternatives like WebP … - [Color Palette Generation Algorithms Explained](https://peasycss.com/guides/color-palette-generation-algorithms/) — Generating aesthetically pleasing color palettes programmatically requires understanding color theory and perceptual uniformity. This guide covers the algorithms behind palette … - [Dark Mode Design Guidelines: Beyond Inverting Colors](https://peasycss.com/guides/dark-mode-design-guidelines/) — Dark mode is more than swapping white for black. Proper dark theme design requires adjusted contrast ratios, desaturated colors, and … - [Color Accessibility and WCAG Contrast Checking](https://peasycss.com/guides/color-accessibility-contrast-checking/) — Approximately 300 million people worldwide have color vision deficiency. Designing with accessible contrast ratios ensures your content is readable by … - [Color Psychology in UI Design: How Color Affects User Behavior](https://peasycss.com/guides/color-psychology-ui-design/) — Color choices influence trust, urgency, calmness, and conversion rates. Understanding the psychological impact of color helps you design interfaces that … - [Flexbox vs CSS Grid: A Practical Comparison](https://peasycss.com/guides/flexbox-vs-css-grid/) — Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and … - [How to Create CSS Gradients: Linear, Radial, and Conic](https://peasycss.com/guides/css-gradients-guide/) — CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control … - [How to Create GIFs From Video Clips](https://peasycss.com/guides/create-gifs-from-video/) — GIFs remain popular for short animations, tutorials, and social media despite their technical limitations. This guide covers how to create … - [How to Add Logos and Branding to QR Codes](https://peasycss.com/guides/add-logos-branding-qr-codes/) — Branded QR codes with logos increase scan rates and reinforce brand identity. Learn how to customize QR codes with logos, … - [Best Practices for Dark Mode Design](https://peasycss.com/guides/dark-mode-design-best-practices/) — Dark mode is no longer optional — users expect it. Designing an effective dark theme requires more than inverting colors. … - [How to Generate Color Palettes Programmatically](https://peasycss.com/guides/generate-color-palettes/) — Algorithmic color palette generation creates harmonious color schemes from a single base color. Learn the math behind complementary, analogous, and … - [Troubleshooting CSS Specificity Conflicts](https://peasycss.com/guides/troubleshooting-css-specificity/) — When CSS rules unexpectedly override each other, specificity is usually the culprit. This guide explains how specificity is calculated and … - [CSS Custom Properties (Variables) Best Practices](https://peasycss.com/guides/css-custom-properties-best-practices/) — CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS … - [Troubleshooting Color Consistency Across Devices](https://peasycss.com/guides/troubleshooting-color-consistency/) — Colors that look perfect on your monitor may appear different on phones, tablets, and printed materials. This guide explains why … - [How to Build Responsive Layouts Without Media Queries](https://peasycss.com/guides/responsive-layouts-without-media-queries/) — Modern CSS provides intrinsic sizing techniques that create responsive layouts without breakpoint-based media queries. Learn how to use clamp(), min(), … - [How to Choose a Color Palette for Your Brand](https://peasycss.com/guides/how-to-choose-brand-color-palette/) — A consistent color palette builds brand recognition and emotional connection. Learn color theory principles for selecting harmonious brand colors. - [How to Create CSS Animations Without JavaScript](https://peasycss.com/guides/how-to-create-css-animations/) — CSS animations and transitions can create engaging UI effects without JavaScript. Learn keyframes, transitions, and performance-optimized animation techniques. - [How to Create Effective Data Visualizations](https://peasycss.com/guides/how-to-create-data-visualizations/) — Good data visualization communicates insights instantly. Learn chart selection, color usage, and labeling best practices for clear, honest data presentation. - [How to Build a CSS Color Palette Generator](https://peasycss.com/guides/how-to-build-css-color-palette/) — Creating consistent color palettes is essential for design systems. Learn how to generate HSL-based palettes and CSS custom property scales. - [How to Minify CSS for Production](https://peasycss.com/guides/how-to-minify-css-production/) — CSS minification removes whitespace and comments to reduce file size. Learn safe minification techniques that don't break your styles. - [Tailwind CSS vs Bootstrap vs Vanilla CSS](https://peasycss.com/guides/tailwind-vs-bootstrap-vs-vanilla-css/) — Choosing a CSS approach affects development speed, bundle size, and design flexibility. Compare utility-first, component-based, and custom CSS strategies. - [CSS Container Queries vs Media Queries](https://peasycss.com/guides/css-container-queries-vs-media-queries/) — Container queries let components respond to their container's size instead of the viewport. Learn when to use each approach for … - [How to Generate Color Palettes Programmatically](https://peasycss.com/guides/how-to-generate-color-palettes-programmatically/) — Learn algorithmic approaches to generating harmonious color palettes for web design, data visualization, and branding. - [Accessible Color Contrast for UI Design](https://peasycss.com/guides/accessible-color-contrast-ui-design/) — Meet WCAG color contrast requirements for text, UI components, and graphical elements in web interfaces. - [Troubleshooting CSS Layout Overflow and Scrollbar Issues](https://peasycss.com/guides/troubleshooting-css-overflow-scrollbar/) — Unexpected horizontal scrollbars and content overflow are common CSS frustrations. Learn systematic approaches to finding and fixing overflow problems. - [How to Generate QR Codes with Custom Designs](https://peasycss.com/guides/how-to-generate-custom-qr-codes/) — Create branded QR codes with custom colors, logos, and patterns while maintaining reliable scannability. - [Troubleshooting CSS Dark Mode Transitions](https://peasycss.com/guides/troubleshooting-css-dark-mode/) — Dark mode implementation can cause flash-of-unstyled-content (FOUC), inconsistent colors, and transition glitches. Learn how to fix them. - [CSS Performance Optimization Best Practices](https://peasycss.com/guides/css-performance-optimization/) — CSS affects page rendering speed more than developers realize. Learn how to reduce render-blocking, optimize selectors, and minimize layout thrashing. - [Image Accessibility Best Practices](https://peasycss.com/guides/image-accessibility-best-practices/) — Make images accessible to all users including those using screen readers, braille displays, and assistive technologies. Learn WCAG guidelines for … - [CSS Logical Properties for International Layouts](https://peasycss.com/guides/css-logical-properties-international-layouts/) — Use CSS logical properties for layouts that work correctly in left-to-right, right-to-left, and vertical writing modes. - [CSS Selector Specificity Deep Dive](https://peasycss.com/guides/css-selector-specificity-deep-dive/) — Master CSS specificity calculation, understand the cascade, and avoid specificity wars in large projects. - [Troubleshooting Color Profile Mismatches](https://peasycss.com/guides/troubleshooting-color-profile-mismatches/) — Images sometimes look different across devices and applications due to color profile mismatches. Learn how to manage ICC profiles for … - [Troubleshooting PDF Printing Problems](https://peasycss.com/guides/troubleshooting-pdf-printing/) — PDF documents sometimes print differently than they appear on screen. Learn how to fix scaling, margin, and color issues when … - [Design System Color Tokens: A Practical Guide](https://peasycss.com/guides/design-system-color-tokens-practical-guide/) — Create and manage color tokens in design systems for consistent theming across products. - [How to Write CSS for Email Clients](https://peasycss.com/guides/how-to-write-css-for-email-clients/) — Handle the unique CSS constraints of email clients including Outlook, Gmail, Apple Mail, and mobile clients. - [CSS Architecture: BEM, SMACSS, and ITCSS Compared](https://peasycss.com/guides/css-architecture-bem-smacss-itcss/) — Large CSS codebases become unmaintainable without architecture. Compare the three most popular CSS methodologies and learn which suits your project. - [CSS Naming Conventions: BEM vs SMACSS vs Atomic](https://peasycss.com/guides/css-naming-conventions-bem-smacss-atomic/) — Compare CSS naming methodologies and choose the right approach for your project size and team. - [Color Palette Generation: Theory and Practice](https://peasycss.com/guides/color-palette-generation-theory-practice/) — Generating harmonious color palettes requires understanding color theory. Learn the algorithms behind complementary, analogous, triadic, and split-complementary palettes. - [Color Profile Management for Web Images](https://peasycss.com/guides/color-profile-management-web-images/) — Handle ICC color profiles correctly when converting and publishing images to avoid color shifts across devices. - [How to Build CSS-Only UI Components](https://peasycss.com/guides/how-to-build-css-only-ui-components/) — Create interactive UI elements like toggles, accordions, tabs, and tooltips using only CSS — no JavaScript required. - [How to Create Accessible CSS Focus Styles](https://peasycss.com/guides/how-to-create-accessible-focus-styles/) — Focus indicators help keyboard users navigate your interface. Learn how to create visible, attractive focus styles that meet WCAG requirements … - [CSS Print Stylesheets: Making Web Pages Printer-Friendly](https://peasycss.com/guides/css-print-stylesheets-guide/) — Web pages printed without a print stylesheet produce wasteful, unreadable output. Learn how to create CSS that makes your content … - [QR Code Design: Branding Without Breaking Scannability](https://peasycss.com/guides/qr-code-branding-design-scannability/) — Design branded QR codes with custom colors, logos, and shapes while maintaining reliable scanning. - [How to Generate Gradients for Web Design](https://peasycss.com/guides/how-to-generate-gradients-web-design/) — Create smooth CSS gradients with proper color interpolation, avoiding muddy midpoints and banding artifacts. - [CSS Grid vs Flexbox: Layout Strategy Guide](https://peasycss.com/guides/css-grid-vs-flexbox-layout-strategy-guide/) — Decide between CSS Grid and Flexbox for different layout patterns with practical examples. - [Understanding Image Color Profiles for Print and Web](https://peasycss.com/guides/image-color-profiles-print-web/) — Color profiles determine how colors are interpreted across devices. Learn the difference between sRGB, Adobe RGB, and CMYK profiles and … - [Troubleshooting CSS Z-Index Stacking Issues](https://peasycss.com/guides/troubleshooting-css-z-index-stacking/) — Z-index doesn't always work as expected because of stacking contexts. Learn how stacking contexts are created, how they affect z-index, … - [CSS Container Queries: Responsive Components Guide](https://peasycss.com/guides/css-container-queries-responsive-components/) — Use container queries to create truly responsive components that adapt to their container size. - [Image Color Profile Management for Print and Web](https://peasycss.com/guides/image-color-profile-management-print-web/) — Manage color profiles (sRGB, Adobe RGB, CMYK) for consistent colors across screens and print. - [Troubleshooting Image Color Shift After Export](https://peasycss.com/guides/troubleshooting-image-color-shift-export/) — Images that look perfect in your editor but appear different in browsers or after export usually have color profile issues. … - [Pinterest Pin Design: Visual Best Practices for Click-Through](https://peasycss.com/guides/pinterest-pin-design-best-practices/) — Pinterest is a visual search engine where pin design directly determines click-through rate. Optimal aspect ratios, text overlay techniques, and … - [Troubleshooting CSS Grid Layout Alignment Issues](https://peasycss.com/guides/troubleshooting-css-grid-layout-alignment/) — CSS Grid is powerful but its alignment behavior can be confusing when items don't land where you expect. This guide … - [CSS Specificity Explained: Why Your Styles Are Being Overridden](https://peasycss.com/guides/css-specificity-styles-overridden-guide/) — Demystify CSS specificity with clear rules and practical examples. Understand the specificity hierarchy, how to calculate specificity scores, and strategies … - [Fluid Typography with clamp(): A Modern CSS Approach](https://peasycss.com/guides/fluid-typography-clamp-modern-css/) — Implement responsive typography that scales smoothly between viewport sizes using CSS clamp(). Covers the math behind fluid type scales, accessibility … - [CSS Container Queries: Responsive Components Without Media Queries](https://peasycss.com/guides/css-container-queries-practical-patterns/) — Learn CSS container queries — the long-awaited feature that makes components responsive to their container size rather than the viewport. … - [OKLCH and Lab Colors in CSS: The Future of Web Color](https://peasycss.com/guides/oklch-lab-colors-css-future-web-color/) — Explore OKLCH and Lab color spaces in CSS — perceptually uniform colors that produce better gradients, more accessible palettes, and … - [CSS Logical Properties: Writing Direction-Agnostic Layouts](https://peasycss.com/guides/css-logical-properties-direction-agnostic/) — Learn CSS logical properties that replace physical directions (left, right, top, bottom) with flow-relative equivalents. Essential for internationalization and RTL … - [Dark Mode CSS: Implementation Strategies and Common Pitfalls](https://peasycss.com/guides/dark-mode-css-implementation-strategies/) — Implement dark mode correctly with CSS custom properties, media queries, and user preference storage. Avoid the common pitfalls that cause … - [CSS Nesting: Native Syntax vs Preprocessor Nesting](https://peasycss.com/guides/css-nesting-native-vs-preprocessor/) — Compare native CSS nesting with Sass/Less nesting syntax. Understand the differences, browser support, migration path, and whether you still need … - [Gradient Design Trends and Techniques for 2025-2026](https://peasycss.com/guides/gradient-design-trends-techniques/) — Gradients have evolved far beyond simple two-color linear fills. Modern gradient techniques include mesh gradients, noise overlays, and animated transitions … - [CSS Cascade Layers: Managing Specificity at Scale](https://peasycss.com/guides/css-cascade-layers-managing-specificity/) — Learn CSS cascade layers (`@layer`) — the solution to specificity wars in large codebases. Control which styles override others regardless … - [CSS aspect-ratio: Responsive Media Without Padding Hacks](https://peasycss.com/guides/css-aspect-ratio-responsive-media/) — Replace the decades-old padding-bottom hack for maintaining aspect ratios with the native CSS aspect-ratio property. Covers responsive images, videos, and … - [Scroll-Driven Animations: Triggering CSS Animations on Scroll](https://peasycss.com/guides/scroll-driven-animations-css-guide/) — Learn the new CSS Scroll-Driven Animations API — trigger animations based on scroll position without JavaScript. Covers scroll() and view() … - [Trigonometry Basics for Developers and Designers](https://peasycss.com/guides/trigonometry-basics-for-developers/) — Trigonometric functions power animations, game physics, audio visualization, and SVG path generation. This guide covers sin, cos, and tan with … - [CSS Subgrid: Aligning Nested Grid Items Across Tracks](https://peasycss.com/guides/css-subgrid-aligning-nested-grid-items/) — Learn CSS subgrid — the feature that solves nested grid alignment. Understand how child elements can participate in their grandparent's … - [CSS Animation Performance: What to Animate and What to Avoid](https://peasycss.com/guides/css-animation-performance-guide/) — Not all CSS properties are equal when it comes to animation performance. Animating the wrong property can drop frame rates … - [Design Token Management: Bridging Design and Development](https://peasycss.com/guides/design-token-management/) — Design tokens are the single source of truth for colors, spacing, typography, and other visual properties. Managing them well eliminates … - [Brand Color Consistency: Maintaining Colors Across Digital and Print](https://peasycss.com/guides/brand-color-consistency-across-media/) — The same hex code can look different on a monitor, a phone screen, and a printed brochure. This guide explains … - [HDR Video: Formats, Compatibility, and Tone Mapping](https://peasycss.com/guides/hdr-video-formats-compatibility/) — HDR video offers wider color range and higher contrast than SDR. Understanding HDR formats and tone mapping ensures your content … - [Figma to CSS Export: A Complete Workflow Guide](https://peasycss.com/guides/figma-to-css-export-workflow/) — Translating Figma designs into production CSS requires more than copying values from the inspect panel. This workflow covers design tokens, … - [Image Color Spaces Explained: sRGB vs Adobe RGB vs Display P3](https://peasycss.com/guides/image-color-spaces-srgb-adobe-rgb-p3/) — Color spaces determine how colors are represented in digital images. Using the wrong color space causes colors to appear muted … - [Animated WebP vs GIF vs APNG: Modern Animation Format Comparison](https://peasycss.com/guides/animated-webp-vs-gif-vs-apng/) — GIF is no longer the only option for short web animations. Animated WebP and APNG offer better compression and color … - [Micro-Interaction Design Patterns for Delightful UX](https://peasycss.com/guides/micro-interaction-design-patterns/) — Micro-interactions are subtle animations that respond to user actions — a button bounce on click, a toggle slide, a checkmark … - [PDF Print Production: Settings for Professional Output](https://peasycss.com/guides/pdf-print-production-settings/) — Printing a PDF that looks perfect on screen but terrible on paper is a costly mistake. Professional print production requires … ## Glossary (44 terms) - [Anchor Positioning](https://peasycss.com/glossary/anchor-positioning/) — A layout feature that positions elements relative to a named anchor element, useful for tooltips … - [Aspect Ratio (CSS)](https://peasycss.com/glossary/aspect-ratio-css/) — A property that sets a preferred width-to-height ratio for an element, preventing layout shift during … - [BEM](https://peasycss.com/glossary/bem/) — A CSS naming convention using block__element--modifier format to create reusable, maintainable class names. - [Box Model](https://peasycss.com/glossary/box-model/) — The layout model where every element is a box with content, padding, border, and margin … - [Calc](https://peasycss.com/glossary/calc/) — A function for performing arithmetic calculations with mixed units in CSS property values (e.g. calc(100% … - [Cascade](https://peasycss.com/glossary/cascade/) — The mechanism by which browsers resolve conflicting CSS declarations based on origin, specificity, and order. - [Clamp](https://peasycss.com/glossary/clamp/) — A function constraining a value between a minimum and maximum, enabling fluid responsive typography and … - [Color Function](https://peasycss.com/glossary/color-function/) — Modern CSS functions for defining colors: oklch(), oklab(), color(), hsl(), hwb(), with improved perceptual uniformity. - [Color Mix](https://peasycss.com/glossary/color-mix/) — A function that blends two colors in a specified color space by a given percentage, … - [Container Query](https://peasycss.com/glossary/container-query/) — A conditional rule applying styles based on the size of a parent container rather than … - [Content Visibility](https://peasycss.com/glossary/content-visibility/) — A property enabling the browser to skip rendering of off-screen elements, dramatically improving initial page … - [CSS max()](https://peasycss.com/glossary/css-max/) — A comparison function returning the largest value from a list, useful for responsive sizing with … - [CSS min()](https://peasycss.com/glossary/css-min/) — A comparison function returning the smallest value from a list, useful for responsive sizing with … - [CSS Nesting Selector](https://peasycss.com/glossary/css-nesting-selector/) — The & character in native CSS nesting representing the parent selector, mirroring Sass nesting behavior. - [CSS Paint API](https://peasycss.com/glossary/css-paint-api/) — A low-level API allowing JavaScript to draw directly into an element's background using a paint … - [CSS Scope](https://peasycss.com/glossary/css-scope/) — A rule that limits style application to a specific DOM subtree, preventing styles from leaking … - [Custom Properties Inheritance](https://peasycss.com/glossary/custom-properties-inheritance/) — The mechanism by which CSS custom properties cascade down the DOM tree, inheritable by default … - [Custom Property](https://peasycss.com/glossary/custom-property/) — A user-defined property (--name) that stores reusable values, accessible via the var() function. - [Flexbox](https://peasycss.com/glossary/flexbox/) — A one-dimensional layout model for distributing space and aligning items in a row or column. - [Grid](https://peasycss.com/glossary/grid/) — A two-dimensional layout system for creating complex web layouts with rows and columns simultaneously. - [:has() Selector](https://peasycss.com/glossary/has-selector/) — A parent selector that matches elements containing descendants matching a given selector, enabling upward DOM … - [Keyframe Animation](https://peasycss.com/glossary/keyframe-animation/) — A set of style rules defining intermediate steps in a CSS animation sequence using percentage … - [lab()](https://peasycss.com/glossary/lab/) — A CSS color function based on the CIE Lab color space, providing device-independent color specification. - [Layer](https://peasycss.com/glossary/layer/) — A mechanism for organizing CSS into explicit layers that control the order of precedence in … - [Logical Property](https://peasycss.com/glossary/logical-property/) — Properties using flow-relative directions (inline-start, block-end) instead of physical ones (left, top) for i18n support. - [Media Query](https://peasycss.com/glossary/media-query/) — A conditional rule applying styles only when the device matches specified criteria (width, orientation, etc.). - [Nesting](https://peasycss.com/glossary/nesting/) — Native CSS feature allowing selectors to be nested inside parent rules using the & symbol, … - [oklch()](https://peasycss.com/glossary/oklch/) — A perceptually uniform color function using Lightness, Chroma, and Hue, producing consistent visual results across … - [Popover](https://peasycss.com/glossary/popover/) — A native HTML attribute for creating dismissible overlay content without JavaScript, styled with CSS ::backdrop. - [Pseudo-class](https://peasycss.com/glossary/pseudo-class/) — A keyword added to selectors targeting elements in a specific state (e.g. :hover, :focus, :nth-child). - [Pseudo-element](https://peasycss.com/glossary/pseudo-element/) — A keyword targeting a specific part of an element (e.g. ::before, ::after, ::first-line, ::selection). - [Relative Color Syntax](https://peasycss.com/glossary/relative-color-syntax/) — A syntax for deriving new colors from existing ones by modifying individual channels (e.g. lighten, … - [Scroll-Driven Animation](https://peasycss.com/glossary/scroll-driven-animation/) — Animations linked to scroll progress rather than time, enabling effects that respond to the user's … - [Scroll Snap](https://peasycss.com/glossary/scroll-snap/) — Properties that control scroll position snapping, ensuring elements align to defined snap points after scrolling. - [Selector Combinator](https://peasycss.com/glossary/selector-combinator/) — Characters that define relationships between selectors: descendant (space), child (>), sibling (+, ~). - [Specificity](https://peasycss.com/glossary/specificity/) — The algorithm browsers use to determine which CSS rule takes precedence when multiple rules target … - [Stacking Context](https://peasycss.com/glossary/stacking-context/) — A three-dimensional conceptualization of HTML elements along the z-axis, created by specific CSS properties. - [Starting Style](https://peasycss.com/glossary/starting-style/) — A rule defining initial styles for elements transitioning from display:none, enabling entry animations. - [Subgrid](https://peasycss.com/glossary/subgrid/) — A Grid feature allowing child grids to inherit and align with the parent grid's track … - [Text Wrap Balance](https://peasycss.com/glossary/text-wrap-balance/) — A text layout mode that distributes text evenly across lines to avoid orphaned short final … - [Transition](https://peasycss.com/glossary/transition/) — A smooth animation between two property values triggered by a state change (e.g. hover). - [Viewport Unit](https://peasycss.com/glossary/viewport-unit/) — Length units relative to the browser viewport dimensions: vw, vh, vmin, vmax, dvh, svh. - [View Transition](https://peasycss.com/glossary/view-transition/) — A browser API enabling animated transitions between DOM states or page navigations with cross-fade and … - [Z-Index](https://peasycss.com/glossary/z-index/) — A property controlling the stacking order of overlapping positioned elements on the z-axis. ## API Base URL: https://peasycss.com/api/v1/ | Endpoint | Description | |----------|-------------| | GET /api/v1/tools/ | List all tools (filterable by category) | | GET /api/v1/tools/{slug}/ | Tool detail with description, steps, FAQ | | GET /api/v1/categories/ | Tool categories | | GET /api/v1/formats/ | File formats reference | | GET /api/v1/conversions/ | Format conversion guides | | GET /api/v1/glossary/ | Terminology definitions | | GET /api/v1/glossary/{slug}/ | Term with simple + technical explanations, code examples, references | | GET /api/v1/guides/ | Educational guides (filterable by category, audience_level) | | GET /api/v1/guides/{slug}/ | Full guide with content, takeaways, ToC, related guides | | GET /api/v1/use-cases/ | Real-world use cases | | GET /api/v1/search/?q={query} | Cross-model search | | GET /api/v1/sites/ | All 16 Peasy sites | OpenAPI spec: https://peasycss.com/api/openapi.json Swagger UI: https://peasycss.com/api/docs/ ## Content Negotiation All pages support Markdown output for AI agents: - Add `?format=md` to any page URL - Or send `Accept: text/markdown` header ## Platform Stats - 251 tools across 16 sites - 131 file formats documented - 1484 format conversion guides - 695 glossary terms - 645 educational guides - 302 real-world use cases Full catalog: https://peasycss.com/llms-full.txt