# Peasy CSS — Full Catalog > 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 Remove comments, whitespace, and redundant characters from CSS to reduce file size. - URL: https://peasycss.com/css/css-minify/ - Category: CSS Tools - Processing: client ### CSS Beautifier Format and indent CSS code with proper spacing, brace placement, and comment preservation. - URL: https://peasycss.com/css/css-beautify/ - Category: CSS Tools - Processing: client ### CSS Gradient Generator Generate beautiful CSS gradients with 16 presets — linear, radial, and conic with vendor prefixes and Tailwind output. - URL: https://peasycss.com/css/css-gradient/ - Category: CSS Tools - Processing: client ### CSS Box Shadow Generator Generate box-shadow CSS from 12 presets — subtle, neon, neumorphism, material design, and more with Tailwind mapping. - URL: https://peasycss.com/css/css-shadow/ - Category: CSS Tools - Processing: client ### CSS Flexbox Generator Generate flexbox container and item CSS with direction, alignment, wrapping, gap, and Tailwind HTML output. - URL: https://peasycss.com/css/css-flexbox/ - Category: CSS Tools - Processing: client ### CSS Grid Generator Generate CSS Grid layouts with column/row sizing presets — equal, auto-fill, sidebar, holy grail — plus responsive Tailwind. - URL: https://peasycss.com/css/css-grid/ - Category: CSS Tools - Processing: client ### CSS Animation Generator Generate @keyframes and animation CSS for 15 effects — fade, slide, bounce, spin, heartbeat, and more with Tailwind output. - URL: https://peasycss.com/css/css-animation/ - Category: CSS Tools - Processing: client ### CSS Border Radius Generator Generate border-radius CSS with 17 presets — pill, blob, leaf, drop, ticket — with shorthand optimization and Tailwind output. - URL: https://peasycss.com/css/css-border-radius/ - Category: CSS Tools - Processing: client ### CSS Text Shadow Generator Generate text-shadow CSS from 10 presets — neon glow, retro layers, emboss, 3D, outline, and fire effects. - URL: https://peasycss.com/css/css-text-shadow/ - Category: CSS Tools - Processing: client ### CSS Transform Generator Generate CSS transform combinations — translate, rotate, scale, skew, and perspective — with modern CSS and Tailwind output. - URL: https://peasycss.com/css/css-transform/ - Category: CSS Tools - Processing: client ### CSS Unit Converter Convert between px, rem, em, %, vw, vh, pt, cm, mm, and in Convert CSS units with configurable base font size and viewport dimensions. Shows all conversions with formulas and CSS usage examples. - URL: https://peasycss.com/css/css-unit-converter/ - Category: CSS Tools - Processing: client - Steps: 1. Enter a value with its unit (e.g., 16px, 1.5rem, 100%) 2. Adjust base font size and viewport dimensions if needed 3. View the conversion table showing all equivalent values 4. Copy the unit you need for your CSS ### CSS Color Converter Convert colors between hex, RGB, HSL, HWB, and named CSS colors Parse any CSS color format and convert to all other formats. Includes WCAG contrast checks and luminance analysis. - URL: https://peasycss.com/css/css-color-converter/ - Category: CSS Tools - Processing: client - Steps: 1. Enter a color in any format (hex, rgb, hsl, or named color) 2. View all equivalent color format representations 3. Check WCAG contrast ratios against white and black 4. Copy the format you need for your CSS ### Media Query Generator Generate responsive CSS media queries with device presets Create CSS media queries with mobile-first, desktop-first, device-specific, and print presets. Includes visual breakpoint diagrams. - URL: https://peasycss.com/css/css-media-query-generator/ - Category: CSS Tools - Processing: client - Steps: 1. Choose a preset: mobile-first, desktop-first, device, or print 2. For custom queries, set min-width, max-width, and orientation 3. Review the generated @media rules with placeholder content 4. Copy the CSS into your stylesheet ### CSS Filter Effects Generate CSS filter effects with 10 presets including grayscale, sepia, vintage, blur, and more. Preview individual filter values and combine them for custom effects. - URL: https://peasycss.com/css/css-filter-effects/ - Category: CSS Tools - Processing: client ### CSS Clip-Path Generator Generate CSS clip-path shapes with 15 geometric presets including triangles, stars, hexagons, and arrows. Custom polygon support with animated transition variants. - URL: https://peasycss.com/css/css-clip-path/ - Category: CSS Tools - Processing: client ## Guides (81) ### Color Theory for Digital Design: A Practical Guide Understanding color theory helps you create visually harmonious designs that communicate effectively. This guide covers color models, harmony rules, accessibility requirements, and practical palette-building techniques. - URL: https://peasycss.com/guides/color-theory-digital-design/ - Category: How-To - Reading time: 1 min - Words: 225 Key takeaways: - Color influences emotion, readability, and user behavior. - Screens display color by mixing Red, Green, and Blue light. - Colors opposite each other on the color wheel (e.g., blue and orange). - WCAG 2.1 requires minimum contrast ratios: ## Why Color Theory Matters Color influences emotion, readability, and user behavior. Studies show that color can increase brand recognition by up to 80% and that 85% of consumers cite color as the primary reason for choosing a product. ## Color Models ### RGB and Hex Screens display color by mixing Red, Green, and Blue light. Hex codes (#FF6B35) are a compact way to write RGB values. This additive model produces white when all channels are at maximum. ### HSL HSL (Hue, Saturation, Lightness) is more intuitive for designers. Adjusting saturation and lightness independently makes it easy to create consistent color palettes and accessible color pairs. ## Color Harmonies ### Complementary Colors opposite each other on the color wheel (e.g., blue and orange). Creates high contrast and visual tension. Best used for accent colors, not large areas. ### Analogous Colors adjacent on the wheel (e.g., blue, blue-green, green). Creates calm, cohesive palettes. Common in nature photography and brand identities. ### Triadic Three colors equally spaced on the wheel. Provides vibrant variety while maintaining balance. Often one color dominates while the others accent. ## Accessibility WCAG 2.1 requires minimum contrast ratios: - **Normal text**: 4.5:1 contrast ratio (AA), 7:1 (AAA) - **Large text**: 3:1 (AA), 4.5:1 (AAA) - **UI components**: 3:1 against adjacent colors Always test your color combinations with a contrast checker before finalizing designs. ### CSS Units Explained: px, em, rem, vh, and When to Use Each CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units is essential for building responsive, accessible interfaces. - URL: https://peasycss.com/guides/css-units-explained/ - Category: How-To - Reading time: 1 min - Words: 235 Key takeaways: - CSS units fall into two categories. - Pixels are the most intuitive unit but don't scale with user preferences. - The `em` unit is relative to the font size of the element's parent. - The `rem` unit is relative to the root element's font size (usually 16px). - `vw`: 1% of viewport width. Useful for full-width elements. ## Absolute vs Relative Units CSS units fall into two categories. Absolute units (like `px`) represent fixed measurements. Relative units (like `em`, `rem`, `%`) scale based on context. ## Pixels (px) Pixels are the most intuitive unit but don't scale with user preferences. On high-DPI screens, one CSS pixel may correspond to multiple device pixels. Use `px` for borders, shadows, and fine-grained control. ## em: Relative to Parent The `em` unit is relative to the font size of the element's parent. `1.5em` means 1.5 times the parent's font size. Be careful with nesting — em values compound, so a nested `1.2em` inside another `1.2em` results in `1.44em` relative to the root. ## rem: Relative to Root The `rem` unit is relative to the root element's font size (usually 16px). Unlike `em`, `rem` doesn't compound with nesting, making it more predictable for spacing and typography systems. ## Viewport Units (vw, vh, dvh) - `vw`: 1% of viewport width. Useful for full-width elements. - `vh`: 1% of viewport height. Tricky on mobile (includes/excludes address bar). - `dvh`: Dynamic viewport height. Accounts for mobile browser chrome. - `svh`: Small viewport height. Always the smallest possible viewport. ## Recommendations | Use Case | Recommended Unit | |----------|------------------| | Font sizes | `rem` | | Spacing/padding | `rem` or `em` | | Borders | `px` | | Full-screen layouts | `dvh` | | Responsive widths | `%` or `vw` | ### Image Format Comparison: JPEG, PNG, WebP, AVIF, and SVG Comprehensive comparison of image formats for the web. Understand compression algorithms, transparency support, animation capabilities, and browser compatibility to choose the right format for every use case. - URL: https://peasycss.com/guides/image-format-comparison-jpeg-png-webp-avif-svg/ - Category: Comparison - Reading time: 1 min - Words: 291 Key takeaways: - Web image formats have evolved dramatically from the JPEG/GIF/PNG era. - JPEG: Photographs where transparency is not needed and universal support is required. - Serve modern formats with fallbacks using the HTML `<picture>` element. - SVG: Logos, icons, illustrations, and any graphic that must scale to arbitrary sizes. ## The Format Landscape Web image formats have evolved dramatically from the JPEG/GIF/PNG era. Modern formats offer 25-50% better compression, but browser support varies. Choosing the right format requires balancing quality, file size, features, and compatibility. ## Detailed Comparison | Format | Compression | Transparency | Animation | Browser Support | | --- | --- | --- | --- | --- | | JPEG | Lossy | No | No | Universal | | PNG | Lossless | Yes (alpha) | No (APNG: partial) | Universal | | WebP | Both | Yes | Yes | 97%+ | | AVIF | Both | Yes | Yes | 92%+ | | SVG | N/A (vector) | Yes | Yes (CSS/SMIL) | Universal | | JPEG XL | Both | Yes | Yes | Chrome flag only | ## When to Use Each Format **JPEG**: Photographs where transparency is not needed and universal support is required. Quality 75-85 offers the best size/quality tradeoff. **PNG**: Screenshots, diagrams, and images with text or sharp edges where lossy artifacts are unacceptable. Use PNG-8 for simple graphics with limited colors. **WebP**: The default recommendation for most web images. Lossy WebP matches JPEG quality at 25-35% smaller file sizes. Lossless WebP is 26% smaller than PNG. **AVIF**: Best compression available but slower to encode. Ideal for hero images and key visuals where encoding time is acceptable and maximum savings matter. **SVG**: Logos, icons, illustrations, and any graphic that must scale to arbitrary sizes. Typically the smallest format for simple graphics and infinitely scalable. ## The `<picture>` Element Strategy Serve modern formats with fallbacks using the HTML `<picture>` element. List AVIF first, then WebP, with JPEG or PNG as the final fallback. Browsers select the first supported format automatically. ### CSS Grid vs Flexbox: When to Use Each Layout System End the Grid vs Flexbox debate with clear guidelines. Understand the conceptual differences, when each layout system excels, and how to combine them effectively for complex layouts. - URL: https://peasycss.com/guides/css-grid-vs-flexbox-when-to-use-each/ - Category: Comparison - Reading time: 1 min - Words: 276 Key takeaways: - Flexbox is a one-dimensional layout system — it arranges items along a single axis (row or column). - Navigation bars (items in a row) - Page-level layouts (header, sidebar, main, footer) - The most effective approach uses Grid for the overall page layout and Flexbox for component-level arrangement within grid cells. ## The Fundamental Difference Flexbox is a one-dimensional layout system — it arranges items along a single axis (row or column). Grid is a two-dimensional layout system — it controls both rows and columns simultaneously. This is not a matter of capability overlap; they solve fundamentally different layout problems. ## When to Use Flexbox - Navigation bars (items in a row) - Card footers (push content to bottom) - Centering content (both axes) - Distributing space between items - Wrapping items to the next line - Any layout that flows in one direction ## When to Use Grid - Page-level layouts (header, sidebar, main, footer) - Image galleries with consistent sizing - Form layouts (labels aligned with inputs) - Any layout requiring precise row AND column control - Overlapping elements (grid areas can overlap) ## Comparison Table | Feature | Flexbox | Grid | | --- | --- | --- | | Dimensions | 1D (row or column) | 2D (rows and columns) | | Content-driven | Yes (items size to content) | Optional (can be track-driven) | | Gap property | Yes | Yes | | Item overlap | No | Yes (grid areas) | | Named areas | No | Yes (`grid-template-areas`) | | Implicit tracks | N/A | Yes (auto-generated rows/columns) | ## Combining Both The most effective approach uses Grid for the overall page layout and Flexbox for component-level arrangement within grid cells. A grid cell containing a card can use flexbox internally to align its content. These systems are complementary, not competing. Experiment with Grid and Flexbox layouts using the Peasy CSS layout generator — visual builder with instant code output. ### CSS Custom Properties (Variables): A Complete Guide Master CSS custom properties — from basic variable usage to advanced patterns like theming, component APIs, and responsive design tokens. Understand how they differ from preprocessor variables and when to use each. - URL: https://peasycss.com/guides/css-custom-properties-variables-complete-guide/ - Category: How-To - Reading time: 1 min - Words: 204 Key takeaways: - CSS custom properties (declared with `--`) are fundamentally different from Sass/Less variables. - background: var(--color-primary); - Define theme tokens as custom properties and swap them for different themes: - Custom properties create clean component interfaces. - Custom properties trigger style recalculation when changed. ## Custom Properties vs Preprocessor Variables CSS custom properties (declared with `--`) are fundamentally different from Sass/Less variables. Custom properties exist at runtime — they cascade, inherit, and can be changed dynamically with JavaScript. Preprocessor variables are compile-time constants that disappear in the output CSS. ## Basic Usage ```css :root { --color-primary: #3b82f6; --spacing-md: 1rem; --radius-lg: 0.75rem; } .button { background: var(--color-primary); padding: var(--spacing-md); border-radius: var(--radius-lg); } ``` ## Theming with Custom Properties Define theme tokens as custom properties and swap them for different themes: ```css :root { --bg: #ffffff; --text: #1a1a1a; } .dark { --bg: #1a1a1a; --text: #ffffff; } ``` Every element using `var(--bg)` automatically updates when the `.dark` class is toggled — no JavaScript per-element manipulation needed. ## Component APIs Custom properties create clean component interfaces. The component defines defaults, and consumers override only what they need: ```css .card { padding: var(--card-padding, 1.5rem); background: var(--card-bg, white); } ``` ## Performance Considerations Custom properties trigger style recalculation when changed. Avoid changing properties on `:root` during animations — scope them to the animated element to limit the recalculation scope. For static design tokens, preprocessor variables perform slightly better since they compile away. Generate and preview CSS custom property themes with the Peasy CSS tools. ### CSS Animation Performance: What the Browser Actually Does Understand the browser rendering pipeline and which CSS properties can be animated efficiently. Learn why some animations are silky smooth while others cause jank, and how to fix performance problems. - URL: https://peasycss.com/guides/css-animation-performance-browser-guide/ - Category: Best Practice - Reading time: 1 min - Words: 271 Key takeaways: - When CSS changes, the browser performs up to four steps: Style calculation → Layout → Paint → Composite. - Animate only `transform` and `opacity` whenever possible. - Movement**: `left/top` → `transform: translate()` - Chrome DevTools Performance panel shows frame timing and identifies jank. - The `will-change` property hints to the browser that an element will be animated, allowing it to optimize in advance. ## The Rendering Pipeline When CSS changes, the browser performs up to four steps: Style calculation → Layout → Paint → Composite. Each step is progressively more expensive. The key to smooth 60fps animation is triggering only compositing — the cheapest step. ## Property Cost Tiers | Tier | Properties | Pipeline Steps | Performance | | --- | --- | --- | --- | | Composite only | `transform`, `opacity` | Composite | Excellent (GPU) | | Paint + Composite | `color`, `background`, `box-shadow` | Paint → Composite | Good | | Layout + Paint | `width`, `height`, `margin`, `padding` | Layout → Paint → Comp | Poor | | Full pipeline | `font-size`, `display` | Style → Layout → Paint → Comp | Very poor | ## The Golden Rule Animate only `transform` and `opacity` whenever possible. These properties run on the GPU compositor thread, independent of the main thread. Even if JavaScript is busy, compositor animations remain smooth. ## Common Performance Fixes - **Movement**: `left/top` → `transform: translate()` - **Sizing**: `width/height` → `transform: scale()` - **Visibility**: `display/visibility` → `opacity` with `pointer-events` - **Color transitions**: Acceptable but ensure `will-change` hint ## Debugging Animation Performance Chrome DevTools Performance panel shows frame timing and identifies jank. The Rendering tab highlights paint regions and layer borders. Enable 'FPS meter' for real-time frame rate monitoring during animation development. ## will-change Property The `will-change` property hints to the browser that an element will be animated, allowing it to optimize in advance. Use sparingly — applying it to too many elements wastes GPU memory. Set it just before animation starts and remove it after completion. ### Color Palette Generation Techniques for Web Design Building a cohesive color palette is the foundation of every design project. This guide covers algorithmic and artistic approaches to generating palettes that work across interfaces, illustrations, and brand assets. - URL: https://peasycss.com/guides/color-palette-generation-techniques/ - Category: How-To - Reading time: 2 min - Words: 305 Key takeaways: - A well-chosen palette creates visual harmony, guides user attention, and reinforces brand identity. - Select a base hue and pick the color directly opposite on the color wheel (180 degrees apart). - HSL (Hue, Saturation, Lightness) is the most intuitive model for palette generation. - Extracting dominant colors from a photograph produces naturally harmonious palettes. - Always test palette accessibility with a contrast checker (WCAG AA requires at least 4.5:1 for text) ## Why Color Palettes Matter A well-chosen palette creates visual harmony, guides user attention, and reinforces brand identity. Random color picks lead to clashing interfaces and inconsistent experiences across pages. ## Algorithmic Approaches ### Complementary Colors Select a base hue and pick the color directly opposite on the color wheel (180 degrees apart). This produces high-contrast pairs ideal for call-to-action buttons against neutral backgrounds. ### Analogous Harmony Choose three to five colors adjacent on the wheel (within 30-60 degrees). The result feels cohesive and calm — perfect for editorial layouts and dashboards where you want subtle differentiation without visual noise. ### Triadic and Tetradic Schemes Triadic schemes use three colors evenly spaced at 120 degrees. Tetradic (rectangular) schemes use four colors forming two complementary pairs. Both offer rich variety but require careful saturation balancing to avoid overwhelming the viewer. ## Working in HSL Space HSL (Hue, Saturation, Lightness) is the most intuitive model for palette generation. Lock the hue and vary saturation and lightness to create tints and shades: | Variant | Saturation | Lightness | |---------|------------|----------| | Vivid | 80-100% | 45-55% | | Muted | 30-50% | 50-60% | | Pastel | 40-60% | 80-90% | | Dark | 60-80% | 20-35% | ## Palette Extraction from Images Extracting dominant colors from a photograph produces naturally harmonious palettes. The k-means clustering algorithm groups pixel values and returns the centroids as representative colors. Median-cut and octree quantization are faster alternatives that trade precision for speed. ## Practical Tips - Always test palette accessibility with a contrast checker (WCAG AA requires at least 4.5:1 for text) - Include a neutral gray scale alongside accent colors - Limit primary palette to five to seven colors and derive extended shades from those - Export palettes as CSS custom properties or design tokens … ### GIF Creation and Optimization: Size, Quality, and Alternatives GIFs remain popular for short animations despite their technical limitations. This guide covers creation, optimization, and modern alternatives like WebP and MP4. - URL: https://peasycss.com/guides/gif-creation-optimization-guide/ - Category: How-To - Reading time: 1 min - Words: 249 Key takeaways: - GIF uses a 256-color palette and lossless frame compression from 1987. - GIF file size scales quadratically with dimensions. - GIFs remain useful for email (broad client support), Slack/Discord reactions (platform auto-play), and simple UI animations under 100 KB. ## GIF Limitations GIF uses a 256-color palette and lossless frame compression from 1987. This makes it extremely inefficient for photographic content — a 5-second GIF can easily exceed 10 MB while an equivalent MP4 might be 200 KB. ## Creating Optimized GIFs ### Reduce Dimensions GIF file size scales quadratically with dimensions. A 480px-wide GIF is 4x smaller than a 960px version. Keep GIFs under 500px wide for web use. ### Limit Frame Rate Most GIF viewers display at 10-15fps regardless of the encoded frame rate. Dropping from 30fps to 12fps cuts file size by 60% with minimal perceived quality loss. ### Reduce Colors GIF supports up to 256 colors per frame. Reducing to 64 or 128 colors can halve file size. Use dithering to simulate missing colors. ### Optimize Frame Disposal Use frame differencing — only encode pixels that change between frames. Tools like Gifsicle automate this optimization and can reduce size by 20-40%. ## Modern Alternatives | Format | Size vs GIF | Browser Support | Transparency | |--------|-------------|-----------------|-------------| | WebP (animated) | 50-80% smaller | 97%+ | Yes | | APNG | 20-50% smaller | 97%+ | Yes (full) | | MP4 (looped) | 90-95% smaller | 99%+ | No | | AVIF (animated) | 85-95% smaller | ~93% | Yes | ## When to Use GIF GIFs remain useful for email (broad client support), Slack/Discord reactions (platform auto-play), and simple UI animations under 100 KB. For everything else, prefer looped MP4 or animated WebP. ### Color Palette Generation Algorithms Explained Generating aesthetically pleasing color palettes programmatically requires understanding color theory and perceptual uniformity. This guide covers the algorithms behind palette generation tools. - URL: https://peasycss.com/guides/color-palette-generation-algorithms/ - Category: Comparison - Reading time: 2 min - Words: 315 Key takeaways: - The choice of color space determines the quality of generated palettes. - The simplest approach: fix saturation and lightness, then rotate the hue by equal increments. - OKLCH separates lightness (L), chroma (C), and hue (H) in a perceptually uniform space. - Extract a palette from an existing image: - Start with a single seed color and generate a palette using color theory relationships: ## Color Space Selection The choice of color space determines the quality of generated palettes. RGB is the default for screens but produces poor perceptual results. HSL is more intuitive but not perceptually uniform. OKLCH is the modern choice for perceptually uniform palette generation. ## Algorithm: HSL Rotation The simplest approach: fix saturation and lightness, then rotate the hue by equal increments. For n colors: `hue_step = 360 / n` Starting at hue 0 with n=5: 0°, 72°, 144°, 216°, 288° **Limitation**: Some hues appear brighter or more saturated than others at the same HSL values. Yellow at S:100 L:50 is far more vivid than blue. ## Algorithm: OKLCH-Based Generation OKLCH separates lightness (L), chroma (C), and hue (H) in a perceptually uniform space. Colors at the same L and C values look equally bright and vivid to the human eye. | Component | Controls | Range | |-----------|----------|------| | Lightness | Perceived brightness | 0 (black) to 1 (white) | | Chroma | Color intensity | 0 (gray) to ~0.4 | | Hue | Color wheel position | 0° to 360° | ## Algorithm: K-Means Extraction Extract a palette from an existing image: 1. Sample pixels from the image 2. Initialize k cluster centroids randomly 3. Assign each pixel to the nearest centroid 4. Move centroids to the mean of their cluster 5. Repeat until convergence 6. The k centroids are your palette colors ## Algorithm: Complementary Extension Start with a single seed color and generate a palette using color theory relationships: - **Monochromatic**: Vary lightness and chroma - **Complementary**: Add hue + 180° - **Split complementary**: Add hue + 150° and hue + 210° - **Triadic**: Add hue + 120° and hue + 240° ## Accessibility Check After generation, verify that the palette produces sufficient contrast ratios for … ### Dark Mode Design Guidelines: Beyond Inverting Colors Dark mode is more than swapping white for black. Proper dark theme design requires adjusted contrast ratios, desaturated colors, and thoughtful elevation mapping to maintain readability and visual hierarchy. - URL: https://peasycss.com/guides/dark-mode-design-guidelines/ - Category: How-To - Reading time: 1 min - Words: 243 Key takeaways: - Simply inverting a light theme produces eye-straining contrast, muddy colors, and broken visual hierarchy. - Use a tiered gray system instead of pure black: - Vibrant colors that look great on white can feel harsh on dark backgrounds. - Avoid pure white (#FFFFFF) text on dark backgrounds. - Define all colors as CSS custom properties with two value sets. ## Why Dark Mode Needs Special Attention Simply inverting a light theme produces eye-straining contrast, muddy colors, and broken visual hierarchy. Dark mode is a parallel design system that shares the same structure but uses different rules. ## Background Layers Use a tiered gray system instead of pure black: | Layer | Light Mode | Dark Mode | |-------|------------|----------| | Surface 0 (page) | #FFFFFF | #121212 | | Surface 1 (card) | #F9FAFB | #1E1E1E | | Surface 2 (elevated) | #F3F4F6 | #2A2A2A | | Surface 3 (modal) | #E5E7EB | #333333 | Higher elevation surfaces are lighter in dark mode — the opposite of light mode where shadows create depth. This simulates light falling on raised surfaces. ## Color Adjustments Vibrant colors that look great on white can feel harsh on dark backgrounds. Reduce saturation by 10-20% and increase lightness slightly. For example, a primary blue of `hsl(220, 90%, 50%)` in light mode becomes `hsl(220, 70%, 65%)` in dark mode. ## Text Contrast Avoid pure white (#FFFFFF) text on dark backgrounds. It creates excessive contrast that causes visual fatigue during long reading sessions. Use #E0E0E0 or #D1D5DB for body text and reserve near-white for headings and emphasis. ## Implementation Strategy Define all colors as CSS custom properties with two value sets. Use `prefers-color-scheme: dark` as the default and provide a manual toggle that stores preference in localStorage. Apply the class to the `<html>` element before first paint to prevent FOUC. ### Color Accessibility and WCAG Contrast Checking Approximately 300 million people worldwide have color vision deficiency. Designing with accessible contrast ratios ensures your content is readable by everyone, not just users with typical vision. - URL: https://peasycss.com/guides/color-accessibility-contrast-checking/ - Category: How-To - Reading time: 1 min - Words: 269 Key takeaways: - The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between foreground text and background colors: - The contrast ratio formula compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). - Light gray text (#999) on white (#FFF) has a ratio of only 2.85:1 — fails AA - Beyond contrast ratios, avoid conveying information through color alone. ## Understanding WCAG Contrast Requirements The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between foreground text and background colors: | Level | Normal Text | Large Text | |-------|-------------|------------| | AA | 4.5:1 | 3:1 | | AAA | 7:1 | 4.5:1 | Large text is defined as 18px bold or 24px regular. Most body text falls under normal text rules. ## How Contrast Ratios Work The contrast ratio formula compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). Luminance is calculated by converting sRGB values to linear light and applying weighted coefficients: 0.2126R + 0.7152G + 0.0722B. ## Common Accessibility Failures - Light gray text (#999) on white (#FFF) has a ratio of only 2.85:1 — fails AA - Placeholder text in forms is often too faint - Colored text on colored backgrounds (e.g., orange on red) may pass hue contrast but fail luminance contrast - Gradients and images behind text create inconsistent contrast across the text span ## Color Blindness Considerations Beyond contrast ratios, avoid conveying information through color alone. Red/green indicators should include icons or text labels. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, with deuteranopia (red-green) being the most common. ## Practical Workflow 1. Choose background and text colors 2. Check the contrast ratio with a tool 3. If below 4.5:1, darken the text or lighten the background until the ratio passes 4. Simulate color blindness (protanopia, deuteranopia, tritanopia) and verify readability 5. Test with a screen reader to ensure non-visual access to all information ### Color Psychology in UI Design: How Color Affects User Behavior Color choices influence trust, urgency, calmness, and conversion rates. Understanding the psychological impact of color helps you design interfaces that align with your product's goals. - URL: https://peasycss.com/guides/color-psychology-ui-design/ - Category: Comparison - Reading time: 1 min - Words: 299 Key takeaways: - Color perception is partly cultural and partly biological. - A/B tests consistently show that button color matters less than button contrast. - Blue dominates fintech, healthcare, and SaaS because it communicates reliability. - Use color to reinforce meaning, not replace it — never rely on color alone to convey status ## Color and Emotion Color perception is partly cultural and partly biological. While red universally signals alertness (it raises heart rate), its association with danger versus celebration varies by culture. Design decisions should consider your target audience's cultural context. ## Common Color Associations in Western UI | Color | Positive Associations | UI Use | |-------|----------------------|--------| | Blue | Trust, stability, calm | Banking, healthcare, corporate | | Green | Growth, success, nature | Finance, eco-brands, success states | | Red | Energy, urgency, passion | Sale banners, error states, CTAs | | Orange | Warmth, enthusiasm | Free trials, creative platforms | | Purple | Luxury, creativity | Premium tiers, design tools | | Yellow | Optimism, attention | Warnings, highlights | | Black | Sophistication, power | Luxury brands, dark themes | ## Color and Conversion A/B tests consistently show that button color matters less than button contrast. A red button on a blue page outperforms a blue button because it stands out, not because red is inherently more clickable. The lesson: make your primary CTA the most visually prominent element, regardless of hue. ## Trust and Credibility Blue dominates fintech, healthcare, and SaaS because it communicates reliability. If your product handles sensitive data (banking, health records, legal documents), lean toward cool colors. Warm, saturated palettes work better for creative tools, social platforms, and entertainment. ## Practical Guidelines - Use color to reinforce meaning, not replace it — never rely on color alone to convey status - Limit your palette to two to three semantic colors (primary, secondary, accent) to avoid decision fatigue - Test with users from your target demographic — color preferences vary by age, gender, and culture - Remember that 4-8% of users have color vision deficiency and may not perceive your intended associations ### Flexbox vs CSS Grid: A Practical Comparison Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and how to combine them for robust, responsive page layouts. - URL: https://peasycss.com/guides/flexbox-vs-css-grid/ - Category: Comparison - Reading time: 1 min - Words: 231 Key takeaways: - The fundamental difference: Flexbox handles layout in one direction (row or column), while Grid handles layout in two dimensions (rows and columns simultaneously). - Flexbox excels at distributing space along a single axis: - Grid is ideal for two-dimensional layouts: - The most effective layouts often use both: Grid for the page structure and Flexbox for component-level alignment within grid cells. ## One-Dimensional vs Two-Dimensional The fundamental difference: Flexbox handles layout in one direction (row or column), while Grid handles layout in two dimensions (rows and columns simultaneously). ## When to Use Flexbox Flexbox excels at distributing space along a single axis: - Navigation bars - Button groups - Centering content vertically and horizontally - Aligning items within a row or column - Components where content size determines layout ## When to Use CSS Grid Grid is ideal for two-dimensional layouts: - Page-level layout (header, sidebar, main, footer) - Card grids with consistent sizing - Dashboard layouts - Overlapping elements - Layouts where the grid structure is more important than the content size ## Side-by-Side Comparison | Feature | Flexbox | CSS Grid | |---------|---------|----------| | Dimensions | 1D (row OR column) | 2D (rows AND columns) | | Content-driven | Yes | Optional | | Gap support | Yes | Yes | | Overlapping items | Difficult | Easy | | Auto-placement | Row/column only | Both directions | | Named areas | No | Yes | | Subgrid | No | Yes | ## Combining Both The most effective layouts often use both: Grid for the page structure and Flexbox for component-level alignment within grid cells. A card grid might use CSS Grid for the overall layout and Flexbox inside each card to align its title, description, and action button. ### How to Create CSS Gradients: Linear, Radial, and Conic CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control over color stops, direction, and shape. - URL: https://peasycss.com/guides/css-gradients-guide/ - Category: How-To - Reading time: 1 min - Words: 225 Key takeaways: - CSS gradients are a type of `background-image`, not a color. - Linear gradients transition colors along a straight line. - Radial gradients emanate from a center point outward. - Conic gradients rotate colors around a center point (like a color wheel). - Color stops control where each color appears in the gradient: ## Gradients as Backgrounds CSS gradients are a type of `background-image`, not a color. This means you can layer them with other backgrounds, apply them to text, and animate them with transitions. ## Linear Gradients Linear gradients transition colors along a straight line. The direction can be specified as an angle (e.g., `45deg`) or keyword (e.g., `to right`). **Common patterns:** - `linear-gradient(to right, #3B82F6, #8B5CF6)` — horizontal blue to purple. - `linear-gradient(135deg, #F43F5E, #F97316)` — diagonal pink to orange. - `linear-gradient(to bottom, transparent, black)` — fade to black overlay. ## Radial Gradients Radial gradients emanate from a center point outward. You control the shape (circle or ellipse), size, and center position. **Common patterns:** - `radial-gradient(circle, #3B82F6, transparent)` — spotlight effect. - `radial-gradient(ellipse at top, #1E293B, #0F172A)` — subtle header vignette. ## Conic Gradients Conic gradients rotate colors around a center point (like a color wheel). They're useful for pie charts, progress indicators, and decorative effects. ## Color Stop Positioning Color stops control where each color appears in the gradient: - `linear-gradient(to right, blue 0%, purple 50%, pink 100%)` — evenly distributed. - `linear-gradient(to right, blue 0%, blue 30%, purple 30%)` — hard color boundary at 30%. ## Performance Note CSS gradients are rendered by the browser and don't require HTTP requests. They're always faster than loading gradient image files and scale perfectly to any resolution. ### How to Create GIFs From Video Clips GIFs remain popular for short animations, tutorials, and social media despite their technical limitations. This guide covers how to create optimized GIFs from video clips with reasonable file sizes. - URL: https://peasycss.com/guides/create-gifs-from-video/ - Category: How-To - Reading time: 1 min - Words: 249 Key takeaways: - Despite being a format from 1987, GIFs are ubiquitous in messaging, social media, documentation, and issue trackers. - GIF file size scales quadratically with resolution. - Crop to only the relevant area (don't capture full screen if you need a small region). - Consider using MP4/WebM video with autoplay instead of GIF. ## GIF: Still Relevant in 2025 Despite being a format from 1987, GIFs are ubiquitous in messaging, social media, documentation, and issue trackers. Their autoplay behavior and universal support make them the default for short animations. ## Creating GIFs From Video ### Step 1: Select Your Clip Keep GIFs under 10 seconds. Shorter clips have smaller file sizes and loop more naturally. Identify the exact start and end frames you want. ### Step 2: Choose Resolution GIF file size scales quadratically with resolution. A 640px wide GIF is often 4x larger than a 320px one. For most web use, 480-640px width is sufficient. ### Step 3: Set Frame Rate Reduce frame rate to 10-15 fps for most GIFs. The human eye perceives smooth motion at 12 fps, and every dropped frame significantly reduces file size. ### Step 4: Optimize Colors GIFs support a maximum of 256 colors per frame. Reduce to 128 or 64 colors when possible. Dithering can create the illusion of more colors. ## Size Optimization Tips - Crop to only the relevant area (don't capture full screen if you need a small region). - Minimize motion — GIFs with lots of changing pixels compress poorly. - Use lossy GIF optimization tools that introduce minor artifacts for major size reduction. ## Modern Alternatives Consider using MP4/WebM video with autoplay instead of GIF. A 10-second GIF might be 5 MB while the equivalent MP4 is 200 KB. Most platforms now support auto-playing muted videos in place of GIFs. ### How to Add Logos and Branding to QR Codes Branded QR codes with logos increase scan rates and reinforce brand identity. Learn how to customize QR codes with logos, colors, and shapes while maintaining reliable scannability. - URL: https://peasycss.com/guides/add-logos-branding-qr-codes/ - Category: How-To - Reading time: 1 min - Words: 249 Key takeaways: - Studies show that branded QR codes receive up to 80% more scans than plain black-and-white codes. - Place your logo in the center of the QR code, overlapping the error correction data. - Dark modules on light backgrounds (maintain contrast). - After adding branding, test thoroughly: - These are critical for the scanner to locate and orient the code. ## Why Brand Your QR Codes? Studies show that branded QR codes receive up to 80% more scans than plain black-and-white codes. A recognizable logo gives users confidence that the QR code leads to a legitimate destination. ## Logo Placement Rules ### Center Overlay Place your logo in the center of the QR code, overlapping the error correction data. This is the safest approach because the center area is reconstructable from surrounding modules. **Requirements:** - Use Error Correction Level H (30%). - Logo should cover no more than 20-25% of the QR code area. - Add a white border around the logo for contrast. ### Corner Integration Do NOT place logos over the three finder patterns (corner squares). These are critical for the scanner to locate and orient the code. ## Color Customization ### Safe Color Choices - Dark modules on light backgrounds (maintain contrast). - Brand primary color for modules, white or light background. - Gradient effects are possible but reduce scan reliability at distance. ### Avoid - Light modules on dark backgrounds (inverted) — some scanners fail. - Low contrast combinations (yellow on white, light gray on white). - Neon or highly saturated colors that blend together on camera. ## Testing Protocol After adding branding, test thoroughly: 1. Scan from 3 different distances. 2. Test in bright and dim lighting. 3. Test with at least 3 different phones. 4. Print a test copy and scan the printed version. 5. Test the smallest size you plan to use. ### Best Practices for Dark Mode Design Dark mode is no longer optional — users expect it. Designing an effective dark theme requires more than inverting colors. This guide covers contrast, elevation, color adaptation, and implementation strategies. - URL: https://peasycss.com/guides/dark-mode-design-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 222 Key takeaways: - Simply inverting all colors produces harsh, unreadable results. - In light mode, shadows indicate elevation. - Saturated colors that work on white backgrounds can vibrate or cause eye strain on dark backgrounds. - Test dark mode at various times of day and in different lighting conditions. ## Dark Mode Is Not Color Inversion Simply inverting all colors produces harsh, unreadable results. Effective dark mode requires thoughtful adaptation of every color in your palette. ## Surface Hierarchy In light mode, shadows indicate elevation. In dark mode, lighter surfaces appear elevated. Material Design's dark theme uses surface colors from #121212 (lowest) to progressively lighter values for elevated elements. | Elevation | Surface Color | Usage | |-----------|--------------|-------| | 0dp | #121212 | Background | | 1dp | #1E1E1E | Cards | | 4dp | #242424 | Navigation | | 8dp | #2C2C2C | Modals | ## Color Adaptation ### Desaturate Brand Colors Saturated colors that work on white backgrounds can vibrate or cause eye strain on dark backgrounds. Reduce saturation by 10-20% and increase lightness slightly for dark mode variants. ### Reduce White Intensity Pure white (#FFFFFF) on dark backgrounds creates excessive contrast that causes eye fatigue. Use off-white values like #E0E0E0 or #F1F5F9 for body text, reserving brighter whites for headings. ## Implementation Approaches 1. **CSS Custom Properties**: Define color tokens that change between themes. 2. **Tailwind dark: variant**: Use `dark:bg-slate-900` classes. 3. **CSS prefers-color-scheme**: Respect system preference automatically. ## Testing Test dark mode at various times of day and in different lighting conditions. What looks good in a dimly lit room may be too dark in bright sunlight. ### How to Generate Color Palettes Programmatically Algorithmic color palette generation creates harmonious color schemes from a single base color. Learn the math behind complementary, analogous, and triadic palettes and how to implement them in code. - URL: https://peasycss.com/guides/generate-color-palettes/ - Category: How-To - Reading time: 1 min - Words: 227 Key takeaways: - Programmatic palette generation uses color theory rules applied to a base color. - Rotate the hue by 180 degrees to find the complement: - From a base color, generate a full shade scale by adjusting lightness: - For more consistent perceived lightness across hues, use OKLCH instead of HSL. ## Color Palette Algorithms Programmatic palette generation uses color theory rules applied to a base color. The HSL (Hue, Saturation, Lightness) color space is most intuitive for algorithmic manipulation. ## HSL-Based Generation ### Complementary Rotate the hue by 180 degrees to find the complement: - Base: hsl(210, 80%, 50%) (blue) - Complement: hsl(30, 80%, 50%) (orange) ### Analogous Select colors 30 degrees apart on the color wheel: - Base: hsl(210, 80%, 50%) - Analogous 1: hsl(180, 80%, 50%) - Analogous 2: hsl(240, 80%, 50%) ### Triadic Three colors 120 degrees apart: - Base: hsl(210, 80%, 50%) - Triadic 1: hsl(330, 80%, 50%) - Triadic 2: hsl(90, 80%, 50%) ## Generating Shades and Tints From a base color, generate a full shade scale by adjusting lightness: | Step | Lightness | Usage | |------|-----------|-------| | 50 | 95% | Subtle backgrounds | | 100 | 90% | Light backgrounds | | 200 | 80% | Borders | | 300 | 70% | Hover states | | 500 | 50% | Primary (base) | | 700 | 30% | Dark variant | | 900 | 10% | Very dark | ## OKLCH: Perceptually Uniform Palettes For more consistent perceived lightness across hues, use OKLCH instead of HSL. HSL's lightness is not perceptually uniform — yellow at 50% lightness appears much brighter than blue at 50% lightness. OKLCH corrects this. ### Troubleshooting CSS Specificity Conflicts When CSS rules unexpectedly override each other, specificity is usually the culprit. This guide explains how specificity is calculated and provides strategies for managing it in growing codebases. - URL: https://peasycss.com/guides/troubleshooting-css-specificity/ - Category: Troubleshooting - Reading time: 1 min - Words: 227 Key takeaways: - When multiple CSS rules target the same element, the browser uses specificity to decide which rule wins. - Libraries like Bootstrap or Material UI use moderately specific selectors. - CSS Cascade Layers provide explicit control over which stylesheets take precedence. - ### The !important Escape Hatch `!important` overrides all specificity rules. - Multiple `!important` declarations compete by specificity again. ## How Specificity Works When multiple CSS rules target the same element, the browser uses specificity to decide which rule wins. Specificity is calculated as a tuple of four values. ## Specificity Hierarchy | Level | Selector | Specificity | |-------|----------|-------------| | 1 (highest) | Inline styles | (1,0,0,0) | | 2 | ID selectors | (0,1,0,0) | | 3 | Classes, attributes, pseudo-classes | (0,0,1,0) | | 4 (lowest) | Elements, pseudo-elements | (0,0,0,1) | ## Common Conflicts ### Third-Party CSS Overriding Your Styles Libraries like Bootstrap or Material UI use moderately specific selectors. When your styles don't apply, the library's specificity may be higher. **Solutions:** - Add a class to increase your selector's specificity. - Use `:where()` (zero specificity) for resets. - Use CSS Layers (`@layer`) to control cascade order. ### The !important Escape Hatch `!important` overrides all specificity rules. It should be used sparingly — only for utility classes (like `.hidden`) or overriding third-party styles when no other option exists. Multiple `!important` declarations compete by specificity again. ## Modern Solutions ### CSS Layers (@layer) CSS Cascade Layers provide explicit control over which stylesheets take precedence. Rules in later-declared layers override earlier layers regardless of specificity. ### :where() and :is() `:where()` contributes zero specificity, making it ideal for default styles that should be easy to override. `:is()` takes the specificity of its most specific argument. ### CSS Custom Properties (Variables) Best Practices CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS variables effectively in production applications. - URL: https://peasycss.com/guides/css-custom-properties-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 193 Key takeaways: - CSS custom properties (often called CSS variables) are named values that you define and reuse throughout your stylesheets. - Define variables with `--` prefix on any element. - Adopt a consistent naming scheme from the start: - Custom properties make dark mode implementation clean: - Custom properties trigger style recalculation when changed. ## What Are CSS Custom Properties? CSS custom properties (often called CSS variables) are named values that you define and reuse throughout your stylesheets. Unlike preprocessor variables (Sass/Less), custom properties are live in the browser and can be changed at runtime with JavaScript. ## Defining and Using Variables Define variables with `--` prefix on any element. The `:root` selector is conventional for global variables: ```css :root { --color-primary: #3B82F6; --spacing-md: 1rem; --font-size-base: 1rem; } ``` Reference with `var()` and optionally provide a fallback: `color: var(--color-primary, blue);` ## Naming Conventions Adopt a consistent naming scheme from the start: - **Semantic names**: `--color-primary`, `--color-danger` (what it means). - **Descriptive names**: `--blue-500`, `--red-600` (what it looks like). - **Two-tier system**: Map descriptive to semantic for maximum flexibility. ## Dark Mode with Custom Properties Custom properties make dark mode implementation clean: ```css :root { --bg: #ffffff; --text: #1a1a1a; } .dark { --bg: #0f172a; --text: #f1f5f9; } ``` All components using these variables automatically adapt when the `.dark` class is toggled. ## Performance Considerations Custom properties trigger style recalculation when changed. Avoid changing many variables simultaneously during animations. For animated properties, consider using `@property` to enable GPU-accelerated transitions. ### Troubleshooting Color Consistency Across Devices Colors that look perfect on your monitor may appear different on phones, tablets, and printed materials. This guide explains why color shifts happen and how to minimize inconsistencies across devices. - URL: https://peasycss.com/guides/troubleshooting-color-consistency/ - Category: Troubleshooting - Reading time: 1 min - Words: 232 Key takeaways: - Color perception depends on the display hardware, color profile, ambient lighting, and rendering engine. - Most web content assumes sRGB, but modern Apple devices, OLED screens, and professional monitors support wider gamuts (P3, Adobe RGB). - Different browsers may apply different color management policies. - Use CSS color spaces**: `oklch()` provides more perceptually uniform colors. - Test critical color choices across Chrome, Firefox, and Safari. ## Why Colors Vary Color perception depends on the display hardware, color profile, ambient lighting, and rendering engine. Two screens showing the same hex code can look noticeably different. ## Display Technology Differences ### sRGB vs Wide Gamut Most web content assumes sRGB, but modern Apple devices, OLED screens, and professional monitors support wider gamuts (P3, Adobe RGB). A vibrant red in P3 color space may appear muted on an sRGB monitor. ### LCD vs OLED OLED displays produce true black (pixels are off) and higher contrast ratios. LCD screens use backlighting, making dark colors appear slightly gray. This difference is most visible in dark mode designs. ## Common Consistency Issues ### Browser Rendering Different browsers may apply different color management policies. Chrome uses the system color profile; some browsers don't. Test critical color choices across Chrome, Firefox, and Safari. ### Print vs Screen Screens use RGB (additive light), while print uses CMYK (subtractive ink). Bright, saturated screen colors often look dull in print because CMYK has a smaller gamut. Always test with a physical proof before large print runs. ## Mitigation Strategies - **Use CSS color spaces**: `oklch()` provides more perceptually uniform colors. - **Don't rely on exact color perception**: Design with sufficient contrast that minor shifts don't affect usability. - **Test on real devices**: Emulators don't reproduce display characteristics accurately. - **Embed ICC profiles**: In images intended for color-critical applications. ### How to Build 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(), max(), container queries, and fluid grids for truly adaptive designs. - URL: https://peasycss.com/guides/responsive-layouts-without-media-queries/ - Category: How-To - Reading time: 1 min - Words: 204 Key takeaways: - Traditional responsive design relies on media queries with fixed breakpoints. - The `clamp()` function sets a value with a minimum, preferred, and maximum: - Apply the same technique to padding, margins, and gaps: - CSS Grid's `auto-fit` and `minmax()` create grids that automatically adjust column count based on available space: - Container queries let elements respond to their container's size rather than the viewport. ## Beyond Breakpoints Traditional responsive design relies on media queries with fixed breakpoints. Modern CSS offers intrinsic approaches where elements respond to their own size rather than the viewport. ## Fluid Typography with clamp() The `clamp()` function sets a value with a minimum, preferred, and maximum: `font-size: clamp(1rem, 2.5vw, 2rem);` This creates smoothly scaling text that never gets smaller than 1rem or larger than 2rem, with the preferred size based on viewport width. ## Fluid Spacing Apply the same technique to padding, margins, and gaps: `padding: clamp(1rem, 3vw, 3rem);` ## Intrinsic Grid Layouts CSS Grid's `auto-fit` and `minmax()` create grids that automatically adjust column count based on available space: `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));` This creates as many 280px-minimum columns as will fit, expanding each to fill remaining space. ## Container Queries Container queries let elements respond to their container's size rather than the viewport. This is ideal for reusable components that may appear in different layout contexts (main content, sidebar, modal). ```css .card-container { container-type: inline-size; } @container (min-width: 400px) { .card { flex-direction: row; } } ``` ## When to Still Use Media Queries Media queries remain useful for major layout shifts (e.g., showing/hiding a sidebar), dark mode preference detection, and print styles. ### How to Choose a Color Palette for Your Brand A consistent color palette builds brand recognition and emotional connection. Learn color theory principles for selecting harmonious brand colors. - URL: https://peasycss.com/guides/how-to-choose-brand-color-palette/ - Category: How-To - Reading time: 1 min - Words: 168 Key takeaways: - Colors evoke emotions and associations. - Color harmonies ensure colors look good together. - Start with one primary color that represents your brand. - Verify that your palette meets WCAG contrast requirements. - Follow the 60-30-10 rule: 60% dominant color (backgrounds), 30% secondary color (containers, sections), 10% accent color (CTAs, highlights). ## Color Psychology Colors evoke emotions and associations. Blue conveys trust (finance, tech). Red signals urgency and passion (food, entertainment). Green suggests growth and health (organic, environmental). Understanding these associations helps align your palette with your brand values. ## Harmony Rules Color harmonies ensure colors look good together. Complementary colors (opposite on the wheel) create high contrast. Analogous colors (adjacent) feel cohesive. Split complementary offers visual interest with less tension. ## Building a Brand Palette Start with one primary color that represents your brand. Add a secondary color for accents and call-to-action elements. Include neutral tones (grays, whites) for backgrounds and text. Most brands need 3-5 colors total. ## Accessibility First Verify that your palette meets WCAG contrast requirements. Primary text needs 4.5:1 contrast against backgrounds. Interactive elements need 3:1 contrast against surrounding content. Test with color blindness simulators. ## Applying the Palette Follow the 60-30-10 rule: 60% dominant color (backgrounds), 30% secondary color (containers, sections), 10% accent color (CTAs, highlights). This ratio creates visual balance without monotony. ### How to Create CSS Animations Without JavaScript CSS animations and transitions can create engaging UI effects without JavaScript. Learn keyframes, transitions, and performance-optimized animation techniques. - URL: https://peasycss.com/guides/how-to-create-css-animations/ - Category: How-To - Reading time: 1 min - Words: 159 Key takeaways: - Transitions animate between two states (hover, focus, active). - transition: background-color 0.3s ease, transform 0.2s ease; - Keyframes define intermediate steps in an animation sequence. - Animate only `transform` and `opacity` for 60fps performance. - Fade in, slide up, pulse, skeleton loading shimmer, and progress bar fill are all achievable with pure CSS. ## CSS Transitions vs Animations Transitions animate between two states (hover, focus, active). Animations use @keyframes to define multi-step sequences that can loop, alternate, and run independently of user interaction. ## Transition Basics ```css .button { transition: background-color 0.3s ease, transform 0.2s ease; } .button:hover { background-color: #4f46e5; transform: translateY(-2px); } ``` ## Keyframe Animations Keyframes define intermediate steps in an animation sequence. You can animate any CSS property, though `transform` and `opacity` are the most performant because they don't trigger layout recalculations. ## Performance Tips - Animate only `transform` and `opacity` for 60fps performance. - Use `will-change` sparingly to hint at upcoming animations. - Avoid animating `width`, `height`, `top`, or `left` — they trigger expensive layout. - Use `prefers-reduced-motion` media query to respect user accessibility preferences. ## Common Animation Patterns Fade in, slide up, pulse, skeleton loading shimmer, and progress bar fill are all achievable with pure CSS. These patterns cover most UI animation needs without JavaScript libraries. ### How to Create Effective Data Visualizations Good data visualization communicates insights instantly. Learn chart selection, color usage, and labeling best practices for clear, honest data presentation. - URL: https://peasycss.com/guides/how-to-create-data-visualizations/ - Category: How-To - Reading time: 1 min - Words: 182 Key takeaways: - Use color purposefully: to highlight key data points, distinguish categories, or encode values. - Every chart needs a clear title, labeled axes, and a legend for multi-series data. - Always start bar chart Y-axes at zero. - Charts should adapt to screen size. - ## Avoiding Misleading Visualizations Always start bar chart Y-axes at zero. ## Choose the Right Chart Type | Data Relationship | Best Chart | |-----------------|----------| | Comparison | Bar chart, grouped bar | | Trend over time | Line chart | | Part of whole | Pie chart, treemap | | Distribution | Histogram, box plot | | Correlation | Scatter plot | ## Color in Data Viz Use color purposefully: to highlight key data points, distinguish categories, or encode values. Avoid using more than 7 colors in a single chart. Use colorblind-safe palettes (avoid red-green distinctions). ## Labeling Every chart needs a clear title, labeled axes, and a legend for multi-series data. Direct labels (on or near data points) are more effective than legends because readers don't need to match colors back and forth. ## Avoiding Misleading Visualizations Always start bar chart Y-axes at zero. Don't use 3D effects that distort perception. Keep consistent scales across related charts. Truncated axes can make small changes look dramatic. ## Responsive Charts Charts should adapt to screen size. On mobile, consider simplifying data, rotating to vertical orientation, or showing summary numbers instead of detailed charts. ### How to Build a CSS Color Palette Generator Creating consistent color palettes is essential for design systems. Learn how to generate HSL-based palettes and CSS custom property scales. - URL: https://peasycss.com/guides/how-to-build-css-color-palette/ - Category: How-To - Reading time: 1 min - Words: 171 Key takeaways: - HSL (Hue, Saturation, Lightness) is the most intuitive color model for palette generation. - A standard palette includes shades from 50 (lightest) to 950 (darkest), following the Tailwind CSS convention. - Map palette values to semantic tokens: `--color-primary`, `--color-danger`, `--color-success`. - OKLCH improves on HSL by producing perceptually uniform scales — each lightness step looks equally different to human eyes. - After generating a palette, verify that text/background combinations meet WCAG contrast requirements. ## HSL: The Designer's Color Model HSL (Hue, Saturation, Lightness) is the most intuitive color model for palette generation. By keeping hue constant and varying lightness from 5% to 95%, you create a consistent shade scale from darkest to lightest. ## Generating a 10-Step Scale A standard palette includes shades from 50 (lightest) to 950 (darkest), following the Tailwind CSS convention. Each step reduces lightness by roughly 8-10 percentage points. ## Semantic Color Tokens Map palette values to semantic tokens: `--color-primary`, `--color-danger`, `--color-success`. This abstraction lets you change the entire palette by updating a single hue value. ## OKLCH: Better Perceptual Uniformity OKLCH improves on HSL by producing perceptually uniform scales — each lightness step looks equally different to human eyes. HSL scales can appear uneven because human perception of lightness is nonlinear. ## Accessibility Verification After generating a palette, verify that text/background combinations meet WCAG contrast requirements. Light backgrounds need dark text (shade 900 on shade 50) and vice versa. Aim for at least 4.5:1 contrast ratio for normal text. ### How to Minify CSS for Production CSS minification removes whitespace and comments to reduce file size. Learn safe minification techniques that don't break your styles. - URL: https://peasycss.com/guides/how-to-minify-css-production/ - Category: How-To - Reading time: 1 min - Words: 168 Key takeaways: - CSS minification strips comments, whitespace, semicolons after the last property, and unnecessary zeros (0.5 → .5, 0px → 0). - Minification typically reduces CSS file size by 15-25%. - Never remove CSS that looks unused without testing — it may be used dynamically. - Generate source maps alongside minified CSS so browser DevTools can map back to original line numbers. - Client-side CSS minification processes files entirely in the browser. ## What Minification Removes CSS minification strips comments, whitespace, semicolons after the last property, and unnecessary zeros (0.5 → .5, 0px → 0). Advanced minifiers also merge duplicate rules and shorten color values (#ffffff → #fff). ## Size Savings Minification typically reduces CSS file size by 15-25%. Combined with gzip/brotli compression, the total reduction reaches 80-90%. For a 100KB stylesheet, this means serving just 10-20KB over the network. ## Safe Minification Rules - Never remove CSS that looks unused without testing — it may be used dynamically. - Preserve `!important` declarations exactly as written. - Don't merge media queries that appear in different order — cascade matters. - Keep `@charset` declarations at the top of the file. ## Source Maps Generate source maps alongside minified CSS so browser DevTools can map back to original line numbers. This makes debugging minified CSS in production possible. ## Browser-Based Minification Client-side CSS minification processes files entirely in the browser. This is useful for quick one-off minification without setting up build tools. ### Tailwind CSS 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. - URL: https://peasycss.com/guides/tailwind-vs-bootstrap-vs-vanilla-css/ - Category: Comparison - Reading time: 1 min - Words: 202 Key takeaways: - Writing CSS from scratch gives maximum control. - Bootstrap provides pre-built components (buttons, cards, modals, navbars) with a consistent design language. - Tailwind provides utility classes like `flex`, `p-4`, `text-lg` that you compose directly in HTML. - Vanilla CSS for small projects or when you need precise control. ## Vanilla CSS Writing CSS from scratch gives maximum control. You define every style, naming convention, and structure. The downside is speed — building complex layouts takes longer, and consistency requires discipline. ## Bootstrap Bootstrap provides pre-built components (buttons, cards, modals, navbars) with a consistent design language. It's fast for prototyping and admin panels but produces 'Bootstrap-looking' sites unless heavily customized. ## Tailwind CSS Tailwind provides utility classes like `flex`, `p-4`, `text-lg` that you compose directly in HTML. It's faster than vanilla CSS for most developers and produces smaller CSS bundles through purging unused utilities. ## Comparison | Feature | Vanilla | Bootstrap | Tailwind | |---------|---------|-----------|----------| | Learning curve | CSS knowledge | Framework API | Utility classes | | Bundle size | Only what you write | 150KB+ | 10-30KB (purged) | | Customization | Unlimited | Theme variables | Config + arbitrary values | | Design uniqueness | High | Low | High | | Development speed | Slow | Fast | Fast | ## When to Choose Each Vanilla CSS for small projects or when you need precise control. Bootstrap for rapid prototyping and admin interfaces. Tailwind for production applications where you want both speed and design flexibility. ### 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 responsive design. - URL: https://peasycss.com/guides/css-container-queries-vs-media-queries/ - Category: Comparison - Reading time: 1 min - Words: 159 Key takeaways: - Media queries respond to the browser viewport width. - Container queries respond to the nearest containment context — the parent element's width. - Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). - Media queries**: Page-level layout, navigation breakpoints, font scaling. - Container queries require a containment context on the parent element. ## Media Queries: Viewport-Based Media queries respond to the browser viewport width. They work well for page-level layout changes but fail for reusable components that appear in containers of different widths on the same page. ## Container Queries: Component-Based Container queries respond to the nearest containment context — the parent element's width. A card component can show a horizontal layout in a wide sidebar and a vertical layout in a narrow sidebar, all on the same viewport. ## Browser Support Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). For older browsers, media queries remain the reliable fallback. ## When to Use Each - **Media queries**: Page-level layout, navigation breakpoints, font scaling. - **Container queries**: Reusable components, card layouts, widget sizing. ## Implementation Container queries require a containment context on the parent element. Use `container-type: inline-size` to create a size container, then query it with `@container (min-width: 400px) { ... }` inside child rules. ### How to Generate Color Palettes Programmatically Learn algorithmic approaches to generating harmonious color palettes for web design, data visualization, and branding. - URL: https://peasycss.com/guides/how-to-generate-color-palettes-programmatically/ - Category: How-To - Reading time: 1 min - Words: 237 ## Programmatic Color Palette Generation Generating color palettes algorithmically produces consistent, harmonious results faster than manual selection. Understanding color theory mathematics lets you create palettes that work across different contexts. ### HSL-Based Generation Working in HSL (Hue, Saturation, Lightness) color space makes palette generation intuitive. To create a complementary palette, add 180° to the hue. For triadic harmony, add 120° intervals. Analogous palettes use 30° intervals. Keeping saturation and lightness consistent while varying hue produces naturally cohesive palettes. ### Perceptually Uniform Spaces HSL has a significant limitation: equal numerical steps don't produce equal perceptual differences. The OKLCH color space solves this — a 10-unit change in lightness looks like the same amount of change regardless of the hue. This matters especially for data visualization where viewers need to distinguish between similar values. ### Palette Expansion Once you have a base palette of 3-5 colors, expand it by generating tints (adding white) and shades (adding black) for each color. A typical design system needs 10 steps per color (50-900), where 500 is the base. Generate these by interpolating in OKLCH space to avoid the muddy grays that RGB interpolation produces. ### Accessibility Integration Every generated palette should be tested for WCAG contrast ratios. Pair each background color with foreground options that meet at least AA standards (4.5:1 for normal text). Automated generators should reject palettes where no text color meets contrast requirements against any of the background colors. ### Accessible Color Contrast for UI Design Meet WCAG color contrast requirements for text, UI components, and graphical elements in web interfaces. - URL: https://peasycss.com/guides/accessible-color-contrast-ui-design/ - Category: Best Practice - Reading time: 2 min - Words: 301 Key takeaways: - WCAG 2.1 defines minimum contrast ratios that ensure text and interactive elements are perceivable by users with low vision and color vision deficiencies. - Disabled button text is exempt from contrast requirements, but the disabled state itself must be perceivable. - Never use color as the only means of conveying information — add icons, patterns, or text labels. ## Color Contrast for Accessibility WCAG 2.1 defines minimum contrast ratios that ensure text and interactive elements are perceivable by users with low vision and color vision deficiencies. These are legal requirements in many jurisdictions. ### Contrast Ratio Requirements Level AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold). Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Non-text elements (icons, borders, form field outlines) require 3:1 contrast against adjacent colors. These ratios apply to the specific color combination, not to the colors individually. ### Common Failures Light gray text on white backgrounds is the most frequent failure. Placeholder text in form fields often fails contrast requirements. Disabled button text is exempt from contrast requirements, but the disabled state itself must be perceivable. Focus indicators must be visible against all backgrounds they appear on. ### Testing Tools Use browser extensions that overlay contrast ratios directly on your UI. Check each text color against its actual background — components used on different page sections may pass on one background and fail on another. Automated tools catch most issues, but manual review is needed for gradient backgrounds, images with text overlays, and interactive states. ### Designing with Constraints Rather than designing freely and fixing contrast afterward, start with accessible color palettes. For any brand color, generate a full scale (100-900) and identify which combinations meet AA and AAA requirements. Document these as the approved text/background pairings in your design system. ### Beyond Contrast Ratios Color contrast is necessary but not sufficient for accessibility. Never use color as the only means of conveying information — add icons, patterns, or text labels. Ensure that links are distinguishable from surrounding text without relying on color alone (underline is the simplest solution). Test your designs with color blindness simulation … ### Troubleshooting CSS Layout Overflow and Scrollbar Issues Unexpected horizontal scrollbars and content overflow are common CSS frustrations. Learn systematic approaches to finding and fixing overflow problems. - URL: https://peasycss.com/guides/troubleshooting-css-overflow-scrollbar/ - Category: Troubleshooting - Reading time: 1 min - Words: 173 Key takeaways: - A horizontal scrollbar appears on the page, or content extends beyond the viewport. - Fixed-width elements**: An element with `width: 1200px` on a 1024px viewport. - Use `max-width: 100%` instead of fixed widths for responsive elements. - Custom scrollbar styles work in WebKit browsers (Chrome, Safari, Edge) using `::-webkit-scrollbar` pseudo-elements. ## Finding the Overflow Source ### Symptoms A horizontal scrollbar appears on the page, or content extends beyond the viewport. ### Debugging Technique Add a temporary style `* { outline: 1px solid red; }` to visualize every element's box. The element extending beyond the viewport edge is the culprit. DevTools' Elements panel also shows overflowing elements. ## Common Causes - **Fixed-width elements**: An element with `width: 1200px` on a 1024px viewport. - **Negative margins**: `margin-left: -50px` can push content off-screen. - **VW units without scrollbar**: `100vw` includes the scrollbar width, causing overflow. - **Flex items**: Flex children default to `min-width: auto`, refusing to shrink. ## Solutions - Use `max-width: 100%` instead of fixed widths for responsive elements. - Replace `100vw` with `100%` on the body or main container. - Add `min-width: 0` to flex children that need to shrink. - Use `overflow-x: hidden` on the body only as a last resort. ## Scrollbar Appearance Custom scrollbar styles work in WebKit browsers (Chrome, Safari, Edge) using `::-webkit-scrollbar` pseudo-elements. Firefox uses `scrollbar-width` and `scrollbar-color` properties. ### How to Generate QR Codes with Custom Designs Create branded QR codes with custom colors, logos, and patterns while maintaining reliable scannability. - URL: https://peasycss.com/guides/how-to-generate-custom-qr-codes/ - Category: How-To - Reading time: 1 min - Words: 272 Key takeaways: - QR codes support significant visual customization without sacrificing functionality, thanks to built-in error correction. - ### Color Customization Dark modules must contrast against light modules with a minimum 40% luminance difference for reliable scanning. - The quiet zone (white border) must be maintained — it's at least 4 modules wide on all sides. - Always test the final code with multiple scanner apps — what works on one may fail on another. ## Custom QR Code Generation QR codes support significant visual customization without sacrificing functionality, thanks to built-in error correction. Understanding the technical constraints lets you create branded codes that scan reliably. ### Error Correction Levels QR codes have four error correction levels: L (7%), M (15%), Q (25%), and H (30%). The percentage indicates how much of the code can be obscured or damaged while remaining scannable. For branded QR codes with logos, use level H — this lets you place a logo over up to 30% of the code area. For plain codes, level M offers a good balance between data density and resilience. ### Color Customization Dark modules must contrast against light modules with a minimum 40% luminance difference for reliable scanning. You can use brand colors as long as this contrast ratio is maintained. Avoid red/green combinations that are problematic for colorblind users. The quiet zone (white border) must be maintained — it's at least 4 modules wide on all sides. ### Adding Logos Center logos work best because QR scanners typically start reading from the corner finder patterns. Keep the logo within the center 20-25% of the code area. Use a white background behind the logo to create a clean boundary. Always test the final code with multiple scanner apps — what works on one may fail on another. ### Output Formats Generate QR codes as SVG for web use — they scale perfectly to any size. Use PNG at minimum 300 DPI for print materials. For very small physical sizes (under 2cm), simplify the code by using shorter URLs and lower error correction to reduce module density. ### Troubleshooting CSS Dark Mode Transitions Dark mode implementation can cause flash-of-unstyled-content (FOUC), inconsistent colors, and transition glitches. Learn how to fix them. - URL: https://peasycss.com/guides/troubleshooting-css-dark-mode/ - Category: Troubleshooting - Reading time: 1 min - Words: 181 Key takeaways: - The page briefly flashes in the wrong color scheme before switching to the user's preferred theme. - Some elements appear in light mode colors even after dark mode is active. - Light images, screenshots, and diagrams feel blinding against dark backgrounds. - This script must be synchronous (not `defer` or `async`). ## Flash of Wrong Theme (FOWT) ### Symptoms The page briefly flashes in the wrong color scheme before switching to the user's preferred theme. ### Cause CSS loads before JavaScript that sets the theme class. During this gap, the default theme (usually light) is visible. ### Solution Add a blocking script in `<head>` that reads the saved theme preference and applies the class before any content renders. This script must be synchronous (not `defer` or `async`). ## Colors Don't Match in Dark Mode ### Symptoms Some elements appear in light mode colors even after dark mode is active. ### Cause Hard-coded color values that don't use CSS custom properties. Colors set as `color: #333` won't change when you toggle a class. ### Solution Use CSS custom properties for all colors: `color: var(--text-primary)`. Define different values in light and dark contexts. ## Images Too Bright in Dark Mode ### Symptoms Light images, screenshots, and diagrams feel blinding against dark backgrounds. ### Solution Reduce brightness slightly with `filter: brightness(0.9)` in dark mode, or add a subtle shadow around images to soften the contrast. ### CSS Performance Optimization Best Practices CSS affects page rendering speed more than developers realize. Learn how to reduce render-blocking, optimize selectors, and minimize layout thrashing. - URL: https://peasycss.com/guides/css-performance-optimization/ - Category: Best Practice - Reading time: 1 min - Words: 159 Key takeaways: - Browsers won't render content until they've downloaded and parsed all CSS. - CSS selectors are evaluated right-to-left. - Remove unused CSS with tree-shaking tools. - Reading layout properties (offsetHeight, getBoundingClientRect) forces the browser to recalculate layout. - Custom fonts can cause FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text). ## CSS Is Render-Blocking Browsers won't render content until they've downloaded and parsed all CSS. A large stylesheet delays the first paint. Critical CSS (styles for above-the-fold content) should be inlined in `<head>` for fastest first paint. ## Selector Performance CSS selectors are evaluated right-to-left. A selector like `.sidebar .nav li a` first finds all `<a>` elements, then filters. Flat selectors (`.nav-link`) are faster than deeply nested ones. ## Reducing CSS Size - Remove unused CSS with tree-shaking tools. - Use shorthand properties (`margin: 0 auto` instead of four margin declarations). - Combine duplicate rules. - Use modern features like `gap` instead of margin hacks. ## Layout Thrashing Reading layout properties (offsetHeight, getBoundingClientRect) forces the browser to recalculate layout. Batch reads and writes separately to avoid forced synchronous layout. ## Font Loading Custom fonts can cause FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text). Use `font-display: swap` to show fallback fonts immediately while custom fonts load. ### Image Accessibility Best Practices Make images accessible to all users including those using screen readers, braille displays, and assistive technologies. Learn WCAG guidelines for alt text, decorative images, complex graphics, and color contrast. - URL: https://peasycss.com/guides/image-accessibility-best-practices/ - Category: Best Practice - Reading time: 1 min - Words: 197 Key takeaways: - Every meaningful image must have an `alt` attribute that describes its content and purpose. - 1.1.1 Non-text Content** (Level A): All images need text alternatives - ## Alt Text Fundamentals Every meaningful image must have an `alt` attribute that describes its content and purpose. ## Alt Text Fundamentals Every meaningful image must have an `alt` attribute that describes its content and purpose. Screen readers announce this text to users who cannot see the image. ## Alt Text Guidelines | Image Type | Alt Text Approach | |------------|------------------| | Informative photo | Describe content: "Golden retriever playing fetch in a park" | | Functional icon | Describe action: "Search" or "Close menu" | | Decorative | Empty alt: `alt=""` (screen reader skips it) | | Complex chart | Brief alt + detailed text description nearby | | Text in image | Include the full text in alt | ## WCAG Requirements - **1.1.1 Non-text Content** (Level A): All images need text alternatives - **1.4.5 Images of Text** (Level AA): Avoid text in images when possible - **1.4.11 Non-text Contrast** (Level AA): UI graphics need 3:1 contrast ratio ## Common Mistakes 1. Starting alt text with "Image of" or "Picture of" (redundant) 2. Using file names as alt text ("IMG_4523.jpg") 3. Stuffing keywords into alt text (hurts SEO and accessibility) 4. Missing alt on meaningful images (WCAG Level A failure) 5. Adding alt text to purely decorative images (adds noise for screen readers) ### CSS Logical Properties for International Layouts Use CSS logical properties for layouts that work correctly in left-to-right, right-to-left, and vertical writing modes. - URL: https://peasycss.com/guides/css-logical-properties-international-layouts/ - Category: Best Practice - Reading time: 1 min - Words: 255 Key takeaways: - Logical properties replace physical properties (left/right/top/bottom) with flow-relative equivalents (inline-start/inline-end/block-start/block-end) that adapt automatically to writing direction and text orientation. - They're especially important in design systems and component libraries that may be used in internationalized applications. - ### Physical vs Logical `margin-left: 1rem` always adds space on the left side, regardless of text direction. ## CSS Logical Properties Logical properties replace physical properties (left/right/top/bottom) with flow-relative equivalents (inline-start/inline-end/block-start/block-end) that adapt automatically to writing direction and text orientation. ### Physical vs Logical `margin-left: 1rem` always adds space on the left side, regardless of text direction. In a right-to-left language like Arabic, this pushes content away from the reading start — the opposite of the intent. `margin-inline-start: 1rem` adds space at the start of the inline axis, which is left in LTR and right in RTL. The same CSS works correctly in both directions. ### Property Mapping `padding-left` → `padding-inline-start`. `margin-right` → `margin-inline-end`. `top` → `inset-block-start`. `border-bottom` → `border-block-end`. `width` → `inline-size`. `height` → `block-size`. `text-align: left` → `text-align: start`. ### When to Use Logical Properties Use logical properties in all new CSS. Even if you don't currently support RTL languages, logical properties cost nothing extra and future-proof your styles. They're especially important in design systems and component libraries that may be used in internationalized applications. ### Browser Support Logical properties are supported in all modern browsers (Chrome 87+, Firefox 66+, Safari 14.1+, Edge 87+). For older browser support, use a PostCSS plugin that generates physical property fallbacks. The fallback approach is `margin-left: 1rem; margin-inline-start: 1rem` — browsers that understand logical properties use the latter. ### Practical Adoption Start by replacing padding and margin on components. Then update border properties and positioning. Finally, convert width/height to inline-size/block-size. Use your linter to flag physical properties in new code. For existing codebases, migrate gradually — component by component rather than a big-bang rewrite. ### CSS Selector Specificity Deep Dive Master CSS specificity calculation, understand the cascade, and avoid specificity wars in large projects. - URL: https://peasycss.com/guides/css-selector-specificity-deep-dive/ - Category: Best Practice - Reading time: 1 min - Words: 274 Key takeaways: - Specificity determines which CSS rule wins when multiple rules target the same element. - Misunderstanding specificity leads to the dreaded !important chains and increasingly convoluted selectors. - ### !important: When It's Acceptable Use !important only for utility classes that must override any component styles (like `. - Never use !important to fix a specificity problem — fix the specificity instead. ## CSS Specificity Specificity determines which CSS rule wins when multiple rules target the same element. Misunderstanding specificity leads to the dreaded !important chains and increasingly convoluted selectors. ### The Specificity Algorithm Specificity is calculated as a tuple of three values: (IDs, Classes, Elements). `#nav .link a` has specificity (1,1,1). `.sidebar .nav-link:hover` has specificity (0,3,0). `div > p + p` has specificity (0,0,3). Higher values win, comparing left to right: (1,0,0) beats (0,99,99). ### What Doesn't Affect Specificity The universal selector (*), combinators (+, >, ~, space), and :where() have zero specificity. :where(.class) has specificity (0,0,0), while :is(.class) has the specificity of its most specific argument. This makes :where() powerful for resettable defaults. ### Specificity Wars Specificity escalation happens when developers override styles by adding more specific selectors, creating a cascade of increasing specificity. This quickly becomes unmaintainable. Solutions: use a methodology like BEM that keeps specificity flat (single class selectors), use CSS custom properties for values that need to vary, and use cascade layers (@layer) to control the override order independently of specificity. ### Cascade Layers CSS @layer provides a new mechanism for controlling cascade order that works independently of specificity. Styles in earlier layers are overridden by styles in later layers, regardless of specificity. This lets utility classes override component styles cleanly: `@layer base, components, utilities`. ### !important: When It's Acceptable Use !important only for utility classes that must override any component styles (like `.hidden { display: none !important }`), and for user-preference overrides like forced dark mode. Never use !important to fix a specificity problem — fix the specificity instead. In a well-organized codebase, !important should appear fewer than 10 times. ### Troubleshooting Color Profile Mismatches Images sometimes look different across devices and applications due to color profile mismatches. Learn how to manage ICC profiles for consistent color. - URL: https://peasycss.com/guides/troubleshooting-color-profile-mismatches/ - Category: Troubleshooting - Reading time: 1 min - Words: 221 Key takeaways: - The same image appears with different colors on your phone, laptop, and desktop monitor. - Images exported from Photoshop or Lightroom appear oversaturated in web browsers. - Images prepared for print appear flat and desaturated on monitors. - Colors outside the CMYK gamut are clipped to the nearest reproducible color, which is always less vibrant. ## Colors Look Different on Each Device ### Symptoms The same image appears with different colors on your phone, laptop, and desktop monitor. Reds may look orange, blues may shift purple. ### Cause Each device has a different display gamut and may interpret color profiles differently. An image in Adobe RGB viewed on an sRGB monitor will appear muted. ### Solution Convert images to sRGB for web and general use. sRGB is the standard color space for the web, and all modern monitors can display it accurately. ## Oversaturated Colors on Web ### Symptoms Images exported from Photoshop or Lightroom appear oversaturated in web browsers. ### Cause The image uses a wide-gamut color space (Display P3, ProPhoto RGB) but the browser renders it as sRGB, stretching the color values. ### Solution Export images with the 'Convert to sRGB' option enabled. In Photoshop, use 'Save for Web' which automatically converts to sRGB. ## CMYK Images Look Dull on Screen ### Symptoms Images prepared for print appear flat and desaturated on monitors. ### Cause CMYK has a smaller color gamut than RGB. Colors outside the CMYK gamut are clipped to the nearest reproducible color, which is always less vibrant. ### Solution Keep separate versions for screen (RGB/sRGB) and print (CMYK). Convert to CMYK only as the final step before sending to the printer. ### Troubleshooting PDF Printing Problems PDF documents sometimes print differently than they appear on screen. Learn how to fix scaling, margin, and color issues when printing PDFs. - URL: https://peasycss.com/guides/troubleshooting-pdf-printing/ - Category: Troubleshooting - Reading time: 1 min - Words: 208 Key takeaways: - Text or images near page edges are cut off when printed. - Content appears too small, too large, or positioned incorrectly on the paper. - Printed colors appear washed out, too dark, or different hues from the screen. - ### Solution For critical color work, use a PDF with CMYK color space. ## Margins Cut Off Content ### Symptoms Text or images near page edges are cut off when printed. ### Cause Printers have non-printable margins (typically 5-12mm). If the PDF content extends into this area, it gets clipped. ### Solution In print settings, choose 'Fit to printable area' or 'Shrink oversized pages'. This scales the content slightly to stay within the printable region. ## Wrong Page Size ### Symptoms Content appears too small, too large, or positioned incorrectly on the paper. ### Cause The PDF page size doesn't match your paper size. A Letter-sized PDF (8.5×11") printed on A4 paper (210×297mm), or vice versa, causes scaling issues. ### Solution Set the correct paper size in your printer dialog. Disable automatic scaling or set it to 'Actual size' if the PDF and paper sizes match. ## Colors Look Different When Printed ### Symptoms Printed colors appear washed out, too dark, or different hues from the screen. ### Cause Screens use RGB color (additive light), while printers use CMYK (subtractive ink). Bright blues, greens, and oranges on screen often can't be reproduced in print. ### Solution For critical color work, use a PDF with CMYK color space. For general documents, accept that some color shift is inevitable between screen and print. ### Design System Color Tokens: A Practical Guide Create and manage color tokens in design systems for consistent theming across products. - URL: https://peasycss.com/guides/design-system-color-tokens-practical-guide/ - Category: Best Practice - Reading time: 1 min - Words: 228 Key takeaways: - Color tokens are named variables that abstract raw color values into semantic meanings. - Build a three-tier token system. - Semantic names describe function, not appearance: --color-text-primary (not --color-dark-gray), --color-surface-warning (not --color-light-yellow), --color-border-interactive (not --color-blue-200). - With proper semantic tokens, dark mode is a matter of remapping alias tokens. - Start small — define tokens for text (primary, secondary, disabled), surfaces (default, elevated, sunken), borders (default, interactive, focus), and state colors (success, warning, error, info). ## What Are Color Tokens Color tokens are named variables that abstract raw color values into semantic meanings. Instead of using #3B82F6 directly, you use tokens like --color-primary, --color-text-secondary, or --color-surface-elevated. This abstraction enables theming, ensures consistency, and makes updates effortless. ## Token Hierarchy Build a three-tier token system. Tier 1 (Global): raw color values (--blue-500: #3B82F6). Tier 2 (Alias): semantic mapping (--color-primary: var(--blue-500)). Tier 3 (Component): specific usage (--button-bg: var(--color-primary)). Most teams only need Tier 1 and 2 — Tier 3 is for large design systems. ## Naming Conventions Semantic names describe function, not appearance: --color-text-primary (not --color-dark-gray), --color-surface-warning (not --color-light-yellow), --color-border-interactive (not --color-blue-200). This makes dark mode implementation natural — --color-text-primary maps to white in dark mode without renaming anything. ## Dark Mode Implementation With proper semantic tokens, dark mode is a matter of remapping alias tokens. --color-surface-default: white (light) or #1a1a1a (dark). --color-text-primary: #111827 (light) or #f9fafb (dark). The component code doesn't change at all — it still references --color-text-primary. Use the CSS prefers-color-scheme media query or a class toggle. ## Practical Implementation Start small — define tokens for text (primary, secondary, disabled), surfaces (default, elevated, sunken), borders (default, interactive, focus), and state colors (success, warning, error, info). Document each token with its intended use case. Use CSS custom properties for web, and platform-specific token systems for native apps. Review and prune unused tokens quarterly. ### How to Write CSS for Email Clients Handle the unique CSS constraints of email clients including Outlook, Gmail, Apple Mail, and mobile clients. - URL: https://peasycss.com/guides/how-to-write-css-for-email-clients/ - Category: How-To - Reading time: 1 min - Words: 269 ## CSS for Email Email CSS operates under severe constraints compared to web CSS. Different email clients support different subsets of CSS, with no reliable feature detection. The result is a development experience that feels like building for browsers from 2005. ### The Landscape Gmail strips <style> tags from non-AMP emails, requiring inline styles. Outlook uses Microsoft Word's rendering engine, which ignores most modern CSS. Apple Mail has excellent CSS support. Yahoo Mail strips some CSS properties. Mobile clients vary dramatically between native apps and webmail interfaces. ### What Works Everywhere Table-based layouts with inline styles remain the most reliable approach. Properties with universal support: color, background-color, font-family, font-size, font-weight, text-align, text-decoration, border, padding, width (on tables), and line-height. These cover the fundamentals of email design. ### What Doesn't Work Flexbox, Grid, CSS variables, calc(), position, float (in Outlook), max-width (in Outlook), margin (inconsistent), and any CSS selector more complex than element and class. Media queries work in most mobile clients but not in webmail interfaces viewed on mobile browsers. ### Responsive Email Without reliable media queries, use a "fluid hybrid" approach: set table widths as percentages with a max-width in a wrapper. Use `<!--[if mso]>` conditional comments for Outlook-specific fixed widths. This provides responsive behavior without media queries in most clients, with a fixed-width fallback in Outlook. ### Dark Mode Dark mode in email is especially tricky because email clients apply their own color inversions. Apple Mail, Outlook.com, and Gmail all handle dark mode differently. Use semantic colors (light text on dark backgrounds) rather than relying on light-mode-only colors. Test dark mode rendering explicitly in each major client. ### CSS Architecture: BEM, SMACSS, and ITCSS Compared Large CSS codebases become unmaintainable without architecture. Compare the three most popular CSS methodologies and learn which suits your project. - URL: https://peasycss.com/guides/css-architecture-bem-smacss-itcss/ - Category: Comparison - Reading time: 1 min - Words: 227 ## Why CSS Architecture Matters CSS has no built-in scoping or encapsulation. Every rule is global, and specificity conflicts grow exponentially with codebase size. CSS architecture methodologies provide naming conventions and organizational patterns to maintain order. ### BEM (Block Element Modifier) BEM structures class names as `.block__element--modifier`. A card component becomes `.card`, its title becomes `.card__title`, and a highlighted variant becomes `.card--featured`. BEM's flat specificity (everything is a single class) eliminates specificity wars. The verbose naming is its main criticism, but it makes relationships between components explicit. ### SMACSS (Scalable and Modular Architecture for CSS) SMACSS categorizes CSS into five types: Base (reset/normalize), Layout (grid systems, page sections), Module (reusable components), State (is-active, is-hidden), and Theme (visual variations). This separation makes it clear where new styles should go and where to look for existing ones. ### ITCSS (Inverted Triangle CSS) ITCSS organizes styles from generic to specific, creating an inverted triangle of specificity. Layers from broadest to narrowest: Settings, Tools, Generic, Elements, Objects, Components, Utilities. Each layer has higher specificity than the last, eliminating specificity conflicts by design. ### Choosing the Right Architecture BEM is the simplest to adopt and works well for component-based projects. SMACSS suits content-heavy sites with distinct page types. ITCSS provides the most rigorous organization for large teams. In practice, many teams combine elements — using BEM naming within an ITCSS layer structure. ### CSS Naming Conventions: BEM vs SMACSS vs Atomic Compare CSS naming methodologies and choose the right approach for your project size and team. - URL: https://peasycss.com/guides/css-naming-conventions-bem-smacss-atomic/ - Category: Comparison - Reading time: 1 min - Words: 292 ## CSS Naming Methodologies As CSS codebases grow, consistent naming conventions prevent specificity wars, make styles predictable, and enable confident refactoring. Different methodologies suit different project scales. ### BEM (Block Element Modifier) BEM uses a strict naming pattern: `.block__element--modifier`. Example: `.card__title--highlighted`. The double underscore separates blocks from elements, the double hyphen marks modifiers. BEM is explicit and self-documenting — you know exactly what each class does and where it belongs. The trade-off is verbose class names that can clutter HTML. ### SMACSS (Scalable and Modular Architecture) SMACSS categorizes styles into five types: Base (defaults), Layout (page structure), Module (reusable components), State (dynamic changes), and Theme (visual theming). Each category has naming conventions: `.l-` for layout, `.is-` for state. SMACSS is less prescriptive than BEM, which can be either a benefit (flexibility) or a drawback (inconsistency). ### Utility-First (Atomic CSS / Tailwind) Instead of semantic class names, use small, single-purpose utility classes directly in HTML: `class="flex items-center gap-4 p-2 rounded-lg bg-white shadow"`. This eliminates naming entirely for most styles. The trade-off: HTML becomes verbose, and design changes require updating every template that uses those classes. Tailwind CSS is the dominant utility-first framework. ### Choosing a Methodology Small projects (personal sites, marketing pages): utility-first is fastest. Medium projects (SaaS products, apps with designers): BEM provides structure without excessive overhead. Large projects (enterprise, design systems): combine BEM for components with utilities for one-off adjustments. Legacy projects: adopt the convention that requires the least refactoring of existing code. ### Consistency Over Methodology The specific methodology matters less than using it consistently. A codebase mixing BEM and SMACSS and ad-hoc naming is worse than a codebase using any single approach uniformly. Document your chosen approach, enforce it in code review, and add linting rules to catch violations. ### Color Palette Generation: Theory and Practice Generating harmonious color palettes requires understanding color theory. Learn the algorithms behind complementary, analogous, triadic, and split-complementary palettes. - URL: https://peasycss.com/guides/color-palette-generation-theory-practice/ - Category: How-To - Reading time: 2 min - Words: 310 ## Color Harmony Rules Color harmony describes combinations that are aesthetically pleasing. These rules are based on positions on the color wheel (HSL/HSV hue values 0-360 degrees). ### Complementary Colors Two colors opposite each other on the color wheel (180 degrees apart). Example: blue (240°) and orange (60°). Complementary pairs create high contrast and visual tension. Use one color as the dominant and the other as an accent — equal amounts of complementary colors compete for attention. ### Analogous Colors Three to five colors adjacent on the color wheel (within 30-60 degrees of each other). Example: blue (240°), blue-green (180°), green (120°). Analogous palettes feel harmonious and natural but can lack contrast. Add a neutral or a single complementary accent to create a focal point. ### Triadic Colors Three colors evenly spaced on the color wheel (120 degrees apart). Example: red (0°), green (120°), blue (240°). Triadic palettes are vibrant and balanced. Let one color dominate and use the other two as accents to prevent visual chaos. ### Split-Complementary Start with a base color, then use the two colors adjacent to its complement. Example: blue (240°) with yellow-orange (45°) and red-orange (15°). This provides the contrast of complementary colors with less tension, making it more forgiving for beginners. ### Generating Accessible Palettes Color harmony is only half the story — your palette must also meet accessibility requirements. Ensure text colors have at least 4.5:1 contrast ratio against their backgrounds (WCAG AA). Test your palette with color blindness simulations (deuteranopia, protanopia, tritanopia). Provide sufficient lightness variation so that the palette remains distinguishable in grayscale. ### Algorithmic Generation Start with a seed color and apply the harmony rule to generate companion colors. Adjust saturation and lightness to create variants: lighter tints for backgrounds, darker shades for text, and muted versions for secondary … ### Color Profile Management for Web Images Handle ICC color profiles correctly when converting and publishing images to avoid color shifts across devices. - URL: https://peasycss.com/guides/color-profile-management-web-images/ - Category: Best Practice - Reading time: 1 min - Words: 295 ## Color Profile Management Images captured by cameras and created in design tools contain embedded ICC color profiles that define how colors should be displayed. Mismanaging these profiles causes visible color shifts between devices and applications. ### sRGB as the Web Standard sRGB is the default color space for web content. Browsers assume sRGB unless an image has an embedded profile indicating otherwise. Converting all web images to sRGB ensures consistent appearance across devices. Display P3 is emerging for HDR content on Apple devices, but sRGB remains the safe default. ### When Profiles Cause Problems A photo shot in Adobe RGB will appear desaturated in browsers that don't color-manage (the colors are interpreted as sRGB when they're actually Adobe RGB values). A CMYK image from print production will render with completely wrong colors in web browsers. Design files in ProPhoto RGB have a wider gamut than any monitor can display. ### Conversion Best Practices Always convert to sRGB using perceptual rendering intent, which preserves the visual relationships between colors even if some are out-of-gamut. Assign the correct source profile before converting — converting a mislabeled image produces wrong colors. After conversion, embed the sRGB profile in the output file. ### Stripping vs Embedding For web optimization, you can strip ICC profiles to save 3-10KB per image. This works because browsers default to sRGB. However, for photographs where color accuracy matters (product photos, food photography, artwork), embed the sRGB profile explicitly to guarantee correct rendering in all color-managed applications. ### Wide Gamut Displays Modern displays (Apple P3, DCI-P3) can show colors outside the sRGB gamut. For these displays, you can serve Display P3 images that take advantage of the wider color range. Use the CSS color-gamut media query to detect P3 support and serve appropriate images. ### How to Build CSS-Only UI Components Create interactive UI elements like toggles, accordions, tabs, and tooltips using only CSS — no JavaScript required. - URL: https://peasycss.com/guides/how-to-build-css-only-ui-components/ - Category: How-To - Reading time: 1 min - Words: 294 ## CSS-Only UI Components Many interactive UI patterns traditionally built with JavaScript can be implemented with CSS alone, reducing bundle size and improving performance. These solutions use native HTML elements enhanced with modern CSS. ### Accordions with details/summary The HTML `<details>` and `<summary>` elements create native accordions without any CSS or JavaScript. The browser handles the open/close interaction, keyboard navigation, and accessibility. Style with CSS: the `[open]` attribute selector targets the expanded state. For custom chevron animation, hide the default marker with `list-style: none` and add a rotating pseudo-element. ### Tabs with Radio Buttons Use hidden radio inputs with associated labels as tab headers. The `:checked` pseudo-class on each radio input controls which tab panel is visible. The labels function as clickable tab buttons. This approach is accessible with keyboard navigation (arrow keys switch between radios in a group) and requires zero JavaScript. ### Tooltips with CSS Use the `::after` pseudo-element on a parent element, with content pulled from a `data-tooltip` attribute. The tooltip is hidden by default (`opacity: 0; pointer-events: none`) and shown on `:hover` and `:focus-within`. Position with CSS transforms. Add `transition: opacity 0.2s` for smooth appearance. For touch devices, use `:focus-within` rather than `:hover`. ### Toggle Switches Style a checkbox as a toggle: hide the default checkbox, style the label as a track with a sliding circle, and use `:checked + label` to move the circle and change the track color. Include focus styles for keyboard accessibility. Ensure the toggle has an accessible name via the label text or aria-label. ### Limitations CSS-only solutions have limitations: state doesn't persist across page loads, complex conditional logic is impractical, and accessibility may require additional ARIA attributes. For simple interactive patterns, CSS-only is excellent. For complex interactive applications, JavaScript provides better control and accessibility. ### How to Create Accessible CSS Focus Styles Focus indicators help keyboard users navigate your interface. Learn how to create visible, attractive focus styles that meet WCAG requirements without compromising design. - URL: https://peasycss.com/guides/how-to-create-accessible-focus-styles/ - Category: How-To - Reading time: 1 min - Words: 248 Key takeaways: - Keyboard users rely on focus indicators to know which element is currently active. - The focus indicator must be visible on all backgrounds — test on white, dark, and colored backgrounds. - Every interactive element (links, buttons, inputs, selects, custom controls) must have a visible focus state. ## Why Focus Styles Matter Keyboard users rely on focus indicators to know which element is currently active. Without visible focus styles, navigating a website with a keyboard is like using a mouse without a cursor. WCAG 2.2 Success Criterion 2.4.7 requires visible focus indicators on all interactive elements. ### The Default Problem Most browsers provide a default outline on focused elements, but `outline: none` is one of the most common CSS declarations in the wild. Designers remove it because the default focus ring doesn't match their design, but they rarely add a replacement, breaking keyboard accessibility. ### Creating Better Focus Styles Use `:focus-visible` instead of `:focus` to show focus indicators only for keyboard navigation, not mouse clicks. Combine outline and box-shadow for a prominent but attractive indicator: ```css button:focus-visible { outline: 2px solid #4F46E5; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.3); } ``` ### Contrast Requirements WCAG 2.2 requires focus indicators to have a contrast ratio of at least 3:1 against adjacent colors. The focus indicator must be visible on all backgrounds — test on white, dark, and colored backgrounds. A thick outline with an offset works better than background color changes because it's visible regardless of the element's background. ### Testing Focus Styles Tab through your entire page to test focus styles. Every interactive element (links, buttons, inputs, selects, custom controls) must have a visible focus state. Test with forced-colors mode (Windows High Contrast) to ensure focus styles survive user color overrides. ### CSS Print Stylesheets: Making Web Pages Printer-Friendly Web pages printed without a print stylesheet produce wasteful, unreadable output. Learn how to create CSS that makes your content look great on paper. - URL: https://peasycss.com/guides/css-print-stylesheets-guide/ - Category: How-To - Reading time: 1 min - Words: 225 ## Why Print Stylesheets Despite the digital age, users still print web pages — invoices, recipes, articles, tickets, and directions. Without a print stylesheet, users get navigation bars, ads, cookie banners, and footer links wasting ink and paper. ### Setting Up Print Styles Use a separate stylesheet or a media query block: ```css @media print { nav, .sidebar, .footer, .cookie-banner { display: none; } body { font-size: 12pt; line-height: 1.5; color: #000; } a { color: #000; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 90%; } } ``` ### Key Adjustments for Print Remove decorative backgrounds and replace dark themes with black-on-white text. Set font sizes in points (pt), not pixels. Expand abbreviated URLs by displaying the href. Remove interactive elements (dropdowns, accordions) and show their content expanded. Set explicit page margins using `@page { margin: 2cm; }`. ### Controlling Page Breaks Use `break-before`, `break-after`, and `break-inside` to control where page breaks occur. Prevent breaking inside figures, code blocks, and tables: `figure, pre, table { break-inside: avoid; }`. Force page breaks before major sections: `h2 { break-before: page; }`. ### Testing Print Styles Use browser DevTools to toggle print media emulation (Chrome: More Tools > Rendering > CSS media type > print). Generate a PDF to inspect the actual output. Check multi-page documents for orphaned headings, broken tables, and missing content. ### QR Code Design: Branding Without Breaking Scannability Design branded QR codes with custom colors, logos, and shapes while maintaining reliable scanning. - URL: https://peasycss.com/guides/qr-code-branding-design-scannability/ - Category: Best Practice - Reading time: 1 min - Words: 234 Key takeaways: - Branded QR codes can increase scan rates by 30-50% compared to plain black-and-white codes. - The three finder patterns (large squares in corners) must maintain their shape and contrast — they're how scanners locate and orient the code. - Dark modules must be darker than light modules — this sounds obvious but is often violated with brand colors. - Place logos in the center of the code, covering no more than 10% of the total area at Level M correction, or 20% at Level H. - Generate branded codes and test with at least five different devices across iOS and Android. ## Balancing Aesthetics and Function Branded QR codes can increase scan rates by 30-50% compared to plain black-and-white codes. However, excessive customization can render codes unscannable. The key is understanding which elements can be modified and which are critical for scanner recognition. ## Safe Customization Areas The three finder patterns (large squares in corners) must maintain their shape and contrast — they're how scanners locate and orient the code. The quiet zone (white border) must remain clear. Data modules in the center can tolerate more modification since error correction can compensate. ## Color Guidelines Dark modules must be darker than light modules — this sounds obvious but is often violated with brand colors. Minimum contrast ratio is 4:1. Avoid red-green combinations as they fail for colorblind users. Light backgrounds with dark modules work best; inverted codes (light on dark) have lower scan rates. ## Logo Insertion Techniques Place logos in the center of the code, covering no more than 10% of the total area at Level M correction, or 20% at Level H. Use a clean white or matching-background border around the logo. Never place logos over finder patterns or alignment patterns. ## Testing Protocol Generate branded codes and test with at least five different devices across iOS and Android. Test at various distances, angles, and lighting conditions. Create a comparison matrix documenting scan success rates for each design variant before committing to production. ### How to Generate Gradients for Web Design Create smooth CSS gradients with proper color interpolation, avoiding muddy midpoints and banding artifacts. - URL: https://peasycss.com/guides/how-to-generate-gradients-web-design/ - Category: How-To - Reading time: 2 min - Words: 302 ## CSS Gradient Generation CSS gradients are powerful but easy to get wrong. Muddy midpoints, visible banding, and unnatural color transitions are common problems with simple two-color gradients. ### Linear vs Radial vs Conic Linear gradients transition along a straight line (top to bottom, left to right, or any angle). Radial gradients radiate from a center point outward. Conic gradients sweep around a center point like a clock hand. Each type suits different design needs: linear for backgrounds, radial for spotlight effects, conic for pie charts and loading indicators. ### The Muddy Middle Problem A gradient from blue to yellow passes through gray in the middle when interpolated in RGB space. This happens because RGB treats each channel independently — the "shortest path" between blue (0,0,255) and yellow (255,255,0) passes through dark gray (128,128,128). Interpolating in OKLCH or HSL space produces vibrant midpoints instead. ### Color Interpolation in CSS CSS Color Level 4 supports `in oklch` syntax: `background: linear-gradient(in oklch, blue, yellow)`. This produces a vibrant gradient through green and cyan rather than muddy gray. For browsers that don't support this yet, add intermediate color stops manually: `linear-gradient(blue, cyan, green, yellow)`. ### Preventing Banding Visible color bands (stair-stepping instead of smooth transitions) occur in gradients with subtle color differences over large areas. Solutions: add a slight noise overlay (1-2% opacity), use more color stops with slight variations, or combine the gradient with a subtle texture. Dark gradients show banding more than bright ones because our eyes are more sensitive to differences in dark tones. ### Gradient Tools Browser-based gradient generators let you pick colors, adjust angles, add color stops, and copy the CSS. Some generate OKLCH-interpolated gradients automatically. Others provide preset gradient collections as starting points. Always test gradients on various screen types — cheap monitors show banding that high-quality … ### CSS Grid vs Flexbox: Layout Strategy Guide Decide between CSS Grid and Flexbox for different layout patterns with practical examples. - URL: https://peasycss.com/guides/css-grid-vs-flexbox-layout-strategy-guide/ - Category: Comparison - Reading time: 2 min - Words: 300 Key takeaways: - CSS Grid and Flexbox are both powerful layout systems, but they solve different problems. - Flexbox excels at distributing space along a single axis. - Grid is ideal when you need control over both rows and columns simultaneously. - Navigation bar: Flexbox (items flow horizontally, space-between works perfectly). - The most effective approach uses Grid for the page layout and Flexbox for component-level layout. ## Two Layout Systems, Different Strengths CSS Grid and Flexbox are both powerful layout systems, but they solve different problems. Flexbox works in one dimension — either a row or a column. Grid works in two dimensions — rows and columns simultaneously. Understanding when to use each (and when to combine them) is essential for modern CSS. ## When to Use Flexbox Flexbox excels at distributing space along a single axis. Use it for: navigation bars, centering content (vertically and horizontally), equal-height cards in a row, space-between distribution, and any layout where items flow in one direction. Flexbox's strength is its simplicity for one-dimensional layout problems. ## When to Use Grid Grid is ideal when you need control over both rows and columns simultaneously. Use it for: page-level layout (header, sidebar, main, footer), magazine-style layouts with varying column spans, overlapping elements, dashboard layouts with precise cell placement, and any layout where items need to align in both directions. ## Common Patterns Navigation bar: Flexbox (items flow horizontally, space-between works perfectly). Card grid: CSS Grid with auto-fill and minmax for responsive columns. Form layout: Grid for label-input alignment. Hero section with centered content: Flexbox with align-items and justify-content. Dashboard: Grid for the overall layout, Flexbox within each card. ## Combining Both The most effective approach uses Grid for the page layout and Flexbox for component-level layout. A Grid defines the overall page structure (sidebar, main content area). Within each grid cell, Flexbox handles the internal layout (centering content, distributing items). This combination leverages each system's strengths. ## Browser Support and Fallbacks Both Grid and Flexbox have excellent browser support (98%+). No fallbacks are needed for modern projects. For legacy browser support, Flexbox has slightly broader support than Grid. Use feature queries (@supports) to provide grid-based layouts with flexbox fallbacks when necessary. ### Understanding Image Color Profiles for Print and Web Color profiles determine how colors are interpreted across devices. Learn the difference between sRGB, Adobe RGB, and CMYK profiles and when to use each. - URL: https://peasycss.com/guides/image-color-profiles-print-web/ - Category: Best Practice - Reading time: 1 min - Words: 246 Key takeaways: - A color profile (ICC profile) is a set of data that describes how a device reproduces color. - ### Profile Conversion Best Practices Always embed the color profile in your image files. - If your images are destined for screens, sRGB is almost always the right choice. - Never convert to a smaller gamut and then back — this permanently clips colors outside the target range. ## What are Color Profiles? A color profile (ICC profile) is a set of data that describes how a device reproduces color. Without profiles, the same RGB values can appear dramatically different on different monitors, printers, and phones. ### sRGB — The Web Standard sRGB is the default color space for the web, email, and most consumer devices. It represents the smallest gamut of the common profiles but ensures the most consistent appearance across devices. If your images are destined for screens, sRGB is almost always the right choice. ### Adobe RGB — Photography and Print Adobe RGB covers approximately 50% of the visible color spectrum compared to sRGB's 35%. This wider gamut captures more saturated greens and cyans, making it preferred by photographers and print professionals. However, displaying Adobe RGB images without proper color management causes them to appear desaturated. ### CMYK — Commercial Printing CMYK profiles describe colors in terms of cyan, magenta, yellow, and black ink percentages. Different printing processes and paper types have different CMYK profiles. Converting from RGB to CMYK should happen as late as possible in the workflow, ideally by the print provider who knows their equipment's characteristics. ### Profile Conversion Best Practices Always embed the color profile in your image files. When converting between profiles, use relative colorimetric rendering intent for most photographs and perceptual for images with highly saturated colors. Never convert to a smaller gamut and then back — this permanently clips colors outside the target range. ### Troubleshooting CSS Z-Index Stacking Issues Z-index doesn't always work as expected because of stacking contexts. Learn how stacking contexts are created, how they affect z-index, and how to debug layering issues. - URL: https://peasycss.com/guides/troubleshooting-css-z-index-stacking/ - Category: Troubleshooting - Reading time: 1 min - Words: 251 ## The Z-Index Mental Model Z-index only works on positioned elements (position: relative/absolute/fixed/sticky) and flex/grid children. More importantly, z-index creates a stacking context — a self-contained layer that contains all of its children. Children cannot escape their parent's stacking context, no matter how high their z-index. ### What Creates a Stacking Context Beyond positioned elements with z-index, these CSS properties create new stacking contexts: opacity less than 1, transform (any value), filter, backdrop-filter, perspective, clip-path, will-change, contain (layout or paint), and isolation: isolate. This means a seemingly unrelated property like `opacity: 0.99` can break your carefully planned z-index hierarchy. ### Debugging Steps First, identify which stacking contexts exist. In Chrome DevTools, the Layers panel shows 3D stacking contexts. Check if your element's parent has any of the stacking-context-creating properties. Remember: a child element with z-index: 9999 inside a parent with z-index: 1 will still be below a sibling element with z-index: 2. ### Common Patterns and Fixes For overlapping modals and dropdowns, use a single stacking context at the body level for all overlays. For header/sticky elements overlapping content, ensure the header's stacking context contains an appropriate z-index relative to the main content area. Use CSS custom properties to manage z-index values systematically: ```css :root { --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; } ``` ### The Isolation Property `isolation: isolate` creates a new stacking context without requiring z-index or transform. Use it intentionally to contain component z-index values within their own context, preventing them from interfering with other components. ### CSS Container Queries: Responsive Components Guide Use container queries to create truly responsive components that adapt to their container size. - URL: https://peasycss.com/guides/css-container-queries-responsive-components/ - Category: How-To - Reading time: 1 min - Words: 258 Key takeaways: - Media queries respond to the viewport size — the entire browser window. - First, declare a containment context on the parent element: `container-type: inline-size` (track width) or `container-type: size` (track both dimensions). - A product card in a narrow sidebar (< 300px) stacks vertically: image on top, text below. - Media queries: "If the screen is narrow, stack these elements." Container queries: "If this component's container is narrow, stack these elements." Media queries require knowing where the component will be used. - Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). ## Beyond Media Queries Media queries respond to the viewport size — the entire browser window. Container queries respond to the size of a parent element. This paradigm shift enables truly reusable components: a card component that layouts differently in a sidebar versus main content area, without knowing which context it's in. ## Setting Up Container Queries First, declare a containment context on the parent element: `container-type: inline-size` (track width) or `container-type: size` (track both dimensions). Optionally name it: `container-name: card-wrapper`. Then use @container to write size-based rules that apply when the container (not viewport) meets the condition. ## Practical Examples A product card in a narrow sidebar (< 300px) stacks vertically: image on top, text below. In a wide main area (> 600px), it layouts horizontally: image left, text right. With container queries, this single component adapts automatically without the parent needing to communicate its width through classes. ## Comparison with Media Queries Media queries: "If the screen is narrow, stack these elements." Container queries: "If this component's container is narrow, stack these elements." Media queries require knowing where the component will be used. Container queries work regardless of context. Use media queries for page-level layout decisions and container queries for component-level adaptations. ## Browser Support and Adoption Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). For older browsers, they gracefully degrade to the default layout. Polyfills exist but add complexity. The progressive enhancement approach works well: design the default layout for the most common size, then add container query enhancements. ### Image Color Profile Management for Print and Web Manage color profiles (sRGB, Adobe RGB, CMYK) for consistent colors across screens and print. - URL: https://peasycss.com/guides/image-color-profile-management-print-web/ - Category: Best Practice - Reading time: 1 min - Words: 293 Key takeaways: - The same RGB values look different on different screens because each display has different color characteristics. - sRGB is the default color space for the web, email, and consumer displays. - Adobe RGB covers about 50% of visible colors — useful for photography that will be printed professionally. - Print uses CMYK (Cyan, Magenta, Yellow, Key/Black) subtractive color mixing — fundamentally different from RGB additive mixing. - Capture images in the widest gamut your camera supports (often Adobe RGB). ## Why Color Profiles Exist The same RGB values look different on different screens because each display has different color characteristics. Color profiles (ICC profiles) define how RGB or CMYK values map to actual colors. Without proper color management, images look inconsistent across devices and drastically different in print versus screen. ## sRGB: The Web Standard sRGB is the default color space for the web, email, and consumer displays. It covers approximately 35% of visible colors — a limited gamut but universally supported. When creating images for web use, always work in and export as sRGB. Browsers assume images without embedded profiles are sRGB. ## Adobe RGB and Display P3 Adobe RGB covers about 50% of visible colors — useful for photography that will be printed professionally. Display P3 covers a similar range and is the native color space of modern Apple displays. Working in these wider gamuts preserves more color information during editing but requires conversion to sRGB for web delivery. ## CMYK for Print Print uses CMYK (Cyan, Magenta, Yellow, Key/Black) subtractive color mixing — fundamentally different from RGB additive mixing. Colors that look vibrant on screen (especially bright blues and greens) often look dull in CMYK print. Always convert to the printer's specific CMYK profile before sending to print. Request the ICC profile from your print vendor. ## Practical Workflow Capture images in the widest gamut your camera supports (often Adobe RGB). Edit in that same color space to preserve data. For web delivery: convert to sRGB, embed the profile, and export. For print: convert to the target CMYK profile, soft-proof on screen, and export as PDF/X. Save the master file in the original wide-gamut format for future use. Never convert CMYK back to RGB — information is permanently lost. ### Troubleshooting Image Color Shift After Export Images that look perfect in your editor but appear different in browsers or after export usually have color profile issues. Learn how to diagnose and fix color shifts. - URL: https://peasycss.com/guides/troubleshooting-image-color-shift-export/ - Category: Troubleshooting - Reading time: 1 min - Words: 262 Key takeaways: - Color shift after export manifests in several ways: images appear too saturated, too dull, have a blue or yellow cast, or look dramatically different between your editor and a web browser. - The root cause is almost always a color profile mismatch. - Always embed the ICC profile in exported files — the slight file size increase (a few KB) prevents color management issues. ## Identifying the Problem Color shift after export manifests in several ways: images appear too saturated, too dull, have a blue or yellow cast, or look dramatically different between your editor and a web browser. The root cause is almost always a color profile mismatch. ### Common Causes Editing in Adobe RGB or ProPhoto RGB and exporting without converting to sRGB causes the most color shifts. Browsers that don't support color management interpret wide-gamut values as sRGB, compressing the gamut and desaturating the image. Another common cause is stripping the ICC profile during export — without a profile, viewers assume sRGB, which may not match the actual color space. ### Diagnosis Steps Open the image in a color-managed application and check the embedded profile. Compare the image in Chrome (color-managed) and an older application (unmanaged). If the image looks correct in Chrome but wrong elsewhere, it has a wide-gamut profile that should be converted to sRGB for web use. If it looks wrong everywhere, the profile may be corrupted or missing. ### Fixing Color Shifts Convert to sRGB before exporting for web use. In Photoshop: Edit > Convert to Profile > sRGB IEC61966-2.1. In GIMP: Image > Mode > Convert to Color Profile. When using command-line tools, ensure the conversion uses relative colorimetric intent to preserve appearance. ### Prevention Set your image editor's default working space to sRGB for web projects. Enable "Convert to sRGB on export" in your export presets. Always embed the ICC profile in exported files — the slight file size increase (a few KB) prevents color management issues. ### Pinterest Pin Design: Visual Best Practices for Click-Through Pinterest is a visual search engine where pin design directly determines click-through rate. Optimal aspect ratios, text overlay techniques, and color choices can double engagement compared to generic image sharing. - URL: https://peasycss.com/guides/pinterest-pin-design-best-practices/ - Category: Best Practice - Reading time: 2 min - Words: 315 Key takeaways: - Unlike other social platforms driven by social graphs, Pinterest operates primarily as a visual discovery and search engine. - The optimal pin aspect ratio is 2:3 (1000×1500 pixels). - Pins with text overlays receive 2-3x more saves than image-only pins. - Red and orange tones consistently outperform blue and green in Pinterest engagement studies. - The pin title (up to 100 characters) is your primary SEO field. ## Pinterest as a Search Engine Unlike other social platforms driven by social graphs, Pinterest operates primarily as a visual discovery and search engine. Users come with intent — they are searching for ideas, products, and inspiration. This means pin design must communicate value at a glance, much like a search result snippet. ## Pin Specifications The optimal pin aspect ratio is 2:3 (1000×1500 pixels). Pins taller than 2:3 get truncated in the feed, hiding the bottom portion. Square pins (1:1) receive less real estate in the feed and underperform by roughly 30%. Use high-resolution images — Pinterest recommends a minimum width of 600 pixels. ## Text Overlay Strategy Pins with text overlays receive 2-3x more saves than image-only pins. The text should be large enough to read on a mobile device (minimum 24pt equivalent), using no more than 6-8 words. Place text in the top two-thirds of the pin — the bottom third is often obscured by the pin title in some views. Use high-contrast text: white text on a dark semi-transparent overlay, or dark text on a light background area. Avoid placing text directly over complex image areas where it becomes unreadable. ## Color and Visual Hierarchy Red and orange tones consistently outperform blue and green in Pinterest engagement studies. Warm colors create urgency and draw the eye in a feed filled with muted lifestyle photography. However, brand consistency should take priority over trend chasing. Multiple images in a single pin (collage style) can work for tutorials and before/after content. Limit collages to 2-4 images to avoid visual clutter at mobile sizes. ## Pin Titles and Descriptions The pin title (up to 100 characters) is your primary SEO field. Include the search keyword naturally — 'Easy 30-Minute Dinner Recipes for Beginners' outperforms 'My Favorite Meals.' The description (up … ### Troubleshooting CSS Grid Layout Alignment Issues CSS Grid is powerful but its alignment behavior can be confusing when items don't land where you expect. This guide diagnoses the most common Grid alignment problems and provides concrete fixes for each scenario. - URL: https://peasycss.com/guides/troubleshooting-css-grid-layout-alignment/ - Category: Troubleshooting - Reading time: 3 min - Words: 560 Key takeaways: - CSS Grid provides two axes of alignment: the block axis (vertical, controlled by `align-*` properties) and the inline axis (horizontal, controlled by `justify-*` properties). - When items don't center as expected, the first thing to check is whether your grid is actually spanning the full available width. - By default, `align-items` is set to `stretch`, causing all items in a row to match the height of the tallest item. - Using percentage values for `gap` can cause unexpected results because the gap percentage is resolved against the grid container's content box size in that dimension. - When two items are placed in the same cell via `grid-column` and `grid-row`, they overlap. ## How Grid Alignment Works CSS Grid provides two axes of alignment: the block axis (vertical, controlled by `align-*` properties) and the inline axis (horizontal, controlled by `justify-*` properties). Each axis has three levels of control: the grid container (`*-content`), individual tracks (`*-items` on the container), and individual cells (`*-self` on the item). Understanding this hierarchy is essential for debugging alignment issues. ## Items Not Centering ### Implicit vs Explicit Grid When items don't center as expected, the first thing to check is whether your grid is actually spanning the full available width. A common mistake is setting `display: grid` without defining column templates — the grid defaults to a single column that fills the container, but `justify-items: center` centers items within that single column, not within the page. ### The min-content Trap Columns defined with `auto` sizing shrink to fit their content. If you center items within an auto-sized column, the column itself may be narrower than expected. Use `1fr` units to ensure columns expand to fill available space before centering. ## Uneven Row Heights ### Default Stretch Behavior By default, `align-items` is set to `stretch`, causing all items in a row to match the height of the tallest item. If you override this with `align-items: start` or `center`, items will shrink to their intrinsic height, creating uneven rows. This is often the intended behavior for card layouts but surprising for data tables. ### Subgrid for Consistent Alignment When card components have internal elements (title, image, description, button) that need to align across cards, use `subgrid` on the card's row definition. This allows the card's children to participate in the parent grid's track sizing, ensuring titles align with titles and buttons align with buttons across all cards in a row. ## Gap Behavior Issues ### Gap with Percentage Values … ### CSS Specificity Explained: Why Your Styles Are Being Overridden Demystify CSS specificity with clear rules and practical examples. Understand the specificity hierarchy, how to calculate specificity scores, and strategies for writing maintainable selectors. - URL: https://peasycss.com/guides/css-specificity-styles-overridden-guide/ - Category: Troubleshooting - Reading time: 1 min - Words: 244 Key takeaways: - When multiple CSS rules target the same element, specificity determines which rule wins. - Count selectors at each level independently. - Over-qualified selectors**: `div#header` has unnecessarily high specificity. Just `#header` works and is easier to override - Use classes for styling, IDs for JavaScript hooks ## The Specificity Hierarchy When multiple CSS rules target the same element, specificity determines which rule wins. Understanding specificity eliminates the frustration of styles that mysteriously refuse to apply. ## Specificity Scoring | Level | Selector Type | Score | Example | | --- | --- | --- | --- | | Highest | Inline styles | 1,0,0,0 | `style="color: red"` | | High | ID selectors | 0,1,0,0 | `#header` | | Medium | Classes, attributes, pseudo-classes | 0,0,1,0 | `.nav`, `[type=text]`, `:hover` | | Low | Elements, pseudo-elements | 0,0,0,1 | `div`, `::before` | | None | Universal selector | 0,0,0,0 | `*` | ## How Scoring Works Count selectors at each level independently. `div.nav#main` scores (0,1,1,1) — one ID, one class, one element. `#main .nav .item` scores (0,1,2,0) — one ID, two classes. The first selector wins because IDs outweigh any number of classes. ## Common Specificity Problems - **Over-qualified selectors**: `div#header` has unnecessarily high specificity. Just `#header` works and is easier to override - **ID selectors in CSS**: IDs create specificity bottlenecks. Prefer classes - **`!important` escalation**: Each `!important` forces the next override to also use `!important`, creating an unwinnable arms race ## Best Practices - Use classes for styling, IDs for JavaScript hooks - Keep specificity flat — single-class selectors (BEM pattern) - Reserve `!important` for utility classes only - Use cascade layers (`@layer`) for architectural specificity control Calculate specificity for any selector with the Peasy CSS specificity calculator. ### Fluid Typography with clamp(): A Modern CSS Approach Implement responsive typography that scales smoothly between viewport sizes using CSS clamp(). Covers the math behind fluid type scales, accessibility considerations, and practical implementation patterns. - URL: https://peasycss.com/guides/fluid-typography-clamp-modern-css/ - Category: How-To - Reading time: 1 min - Words: 269 Key takeaways: - Fixed font sizes require media query breakpoints for different screen sizes, creating jarring jumps between sizes. - font-size: clamp(minimum, preferred, maximum); - To calculate the preferred value for a given range: - Always use `rem` for minimum values to respect user font size preferences. ## The Problem with Fixed Font Sizes Fixed font sizes require media query breakpoints for different screen sizes, creating jarring jumps between sizes. Viewport units (`vw`) scale continuously but become too small on mobile and too large on desktop without constraints. The `clamp()` function solves both problems elegantly. ## How clamp() Works ```css font-size: clamp(minimum, preferred, maximum); font-size: clamp(1rem, 0.5rem + 1.5vw, 2rem); ``` The browser uses the preferred value (viewport-relative) but never goes below the minimum or above the maximum. The result is smooth scaling between two bounds — no breakpoints needed. ## The Formula To calculate the preferred value for a given range: ``` preferred = min-size + (max-size - min-size) * (100vw - min-viewport) / (max-viewport - min-viewport) ``` For 1rem at 320px → 2rem at 1200px: `preferred = 1rem + (2 - 1) * (100vw - 320px) / (1200 - 320)` = `1rem + 1 * (100vw - 320px) / 880` ≈ `0.636rem + 1.136vw` ## Type Scale | Level | Mobile (320px) | Desktop (1200px) | clamp() | | --- | --- | --- | --- | | Body | 1rem | 1.125rem | `clamp(1rem, 0.95rem + 0.14vw, 1.125rem)` | | H3 | 1.25rem | 1.5rem | `clamp(1.25rem, 1.11rem + 0.28vw, 1.5rem)` | | H2 | 1.5rem | 2rem | `clamp(1.5rem, 1.22rem + 0.57vw, 2rem)` | | H1 | 2rem | 3rem | `clamp(2rem, 1.43rem + 1.14vw, 3rem)` | ## Accessibility Always use `rem` for minimum values to respect user font size preferences. Ensure the minimum size meets WCAG SC 1.4.4 (resize up to 200%). Generate fluid type scales with the Peasy typography calculator. ### CSS Container Queries: Responsive Components Without Media Queries Learn CSS container queries — the long-awaited feature that makes components responsive to their container size rather than the viewport. Covers syntax, browser support, and migration from media queries. - URL: https://peasycss.com/guides/css-container-queries-practical-patterns/ - Category: How-To - Reading time: 1 min - Words: 243 Key takeaways: - Media queries respond to the viewport width. - @container card (min-width: 400px) { - New units relative to the container's dimensions: - Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). - Start with components that appear in multiple contexts — cards, navigation items, form fields. ## The Media Query Limitation Media queries respond to the viewport width. But a card component placed in a narrow sidebar needs a different layout than the same card in a wide main area — both at the same viewport width. Container queries solve this by letting components respond to their parent's size. ## Basic Syntax ```css .card-container { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card { flex-direction: row; } } @container card (max-width: 399px) { .card { flex-direction: column; } } ``` ## Container Query Units New units relative to the container's dimensions: | Unit | Relative To | | --- | --- | | `cqw` | 1% of container width | | `cqh` | 1% of container height | | `cqi` | 1% of container inline size | | `cqb` | 1% of container block size | | `cqmin` | Smaller of cqi/cqb | | `cqmax` | Larger of cqi/cqb | ## Browser Support Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). For older browsers, use media queries as a fallback — the layout will be viewport-responsive instead of container-responsive. ## Migration Strategy Start with components that appear in multiple contexts — cards, navigation items, form fields. Add `container-type: inline-size` to their parent wrappers and convert their media queries to container queries. Components in single contexts can remain on media queries. Generate container query CSS with the Peasy responsive CSS tool. ### OKLCH and Lab Colors in CSS: The Future of Web Color Explore OKLCH and Lab color spaces in CSS — perceptually uniform colors that produce better gradients, more accessible palettes, and consistent lightness across hues. The successor to HSL for professional color work. - URL: https://peasycss.com/guides/oklch-lab-colors-css-future-web-color/ - Category: How-To - Reading time: 1 min - Words: 272 Key takeaways: - HSL (Hue, Saturation, Lightness) is intuitive but perceptually non-uniform. - OKLCH (Lightness, Chroma, Hue) models human color perception accurately. - Gradients**: No gray dead zones between complementary colors - All modern browsers support OKLCH. ## Why HSL Falls Short HSL (Hue, Saturation, Lightness) is intuitive but perceptually non-uniform. Yellow at `hsl(60, 100%, 50%)` appears much brighter than blue at `hsl(240, 100%, 50%)`, despite having the same L value. This inconsistency makes it difficult to create accessible palettes with consistent perceived brightness across different hues. ## OKLCH: Perceptually Uniform Color OKLCH (Lightness, Chroma, Hue) models human color perception accurately. Colors with the same L value genuinely appear equally bright. This makes OKLCH the ideal color space for creating harmonious palettes, accessible color systems, and smooth gradients. ```css color: oklch(0.7 0.15 150); /* L: 70%, C: 0.15, H: 150° */ color: oklch(0.7 0.15 250); /* Same lightness, different hue */ ``` ## Comparison | Feature | HSL | OKLCH | Lab | | --- | --- | --- | --- | | Perceptual uniformity | No | Yes | Yes | | Intuitive hue | Yes | Yes | No (a/b axes) | | Gamut mapping | sRGB only | P3, Rec.2020 | P3, Rec.2020 | | Browser support | Universal | Modern (95%+) | Modern (95%+) | | Gradient quality | Muddy midpoints | Smooth | Smooth | ## Practical Benefits - **Gradients**: No gray dead zones between complementary colors - **Palettes**: Consistent perceived brightness across all accent colors - **Accessibility**: Reliable contrast ratios based on perceptual lightness - **Wide gamut**: Access P3 colors on modern displays ## Using OKLCH Today All modern browsers support OKLCH. For older browser fallback, provide an sRGB color first and the OKLCH color second — browsers ignore what they cannot parse. Generate and convert OKLCH colors with the Peasy color tools. ### CSS Logical Properties: Writing Direction-Agnostic Layouts Learn CSS logical properties that replace physical directions (left, right, top, bottom) with flow-relative equivalents. Essential for internationalization and RTL language support. - URL: https://peasycss.com/guides/css-logical-properties-direction-agnostic/ - Category: Best Practice - Reading time: 1 min - Words: 258 Key takeaways: - Traditional CSS uses physical directions: `margin-left`, `padding-right`, `border-top`. - margin: 1rem 2rem; /* top/bottom, left/right */ - Logical properties are supported in all modern browsers (Chrome 87+, Firefox 66+, Safari 15+). - New projects should use logical properties by default — even if you only support LTR today, it future-proofs the codebase. ## Physical vs Logical Properties Traditional CSS uses physical directions: `margin-left`, `padding-right`, `border-top`. These break in right-to-left (RTL) languages like Arabic and Hebrew — a `margin-left` that adds space before content in English adds space after content in Arabic. Logical properties use flow-relative directions that automatically adapt. ## Property Mapping | Physical | Logical | Meaning | | --- | --- | --- | | `margin-left` | `margin-inline-start` | Before content (in writing direction) | | `margin-right` | `margin-inline-end` | After content | | `margin-top` | `margin-block-start` | Before block (typically top) | | `margin-bottom` | `margin-block-end` | After block (typically bottom) | | `width` | `inline-size` | Size in writing direction | | `height` | `block-size` | Size perpendicular to writing | | `text-align: left` | `text-align: start` | Align to writing start | ## Shorthand Properties ```css /* Physical shorthand */ margin: 1rem 2rem; /* top/bottom, left/right */ /* Logical equivalents */ margin-block: 1rem; /* block-start and block-end */ margin-inline: 2rem; /* inline-start and inline-end */ ``` ## Browser Support Logical properties are supported in all modern browsers (Chrome 87+, Firefox 66+, Safari 15+). For projects requiring older browser support, use physical properties with `[dir=rtl]` overrides as a fallback. ## When to Adopt New projects should use logical properties by default — even if you only support LTR today, it future-proofs the codebase. For existing projects, migrate incrementally during refactoring. The CSS is identical in LTR — logical properties only change behavior in RTL contexts. Generate and preview logical property CSS with the Peasy CSS tools. ### Dark Mode CSS: Implementation Strategies and Common Pitfalls Implement dark mode correctly with CSS custom properties, media queries, and user preference storage. Avoid the common pitfalls that cause flash of wrong theme, poor contrast, and inconsistent colors. - URL: https://peasycss.com/guides/dark-mode-css-implementation-strategies/ - Category: How-To - Reading time: 1 min - Words: 259 Key takeaways: - Define all colors as custom properties and swap them for dark mode: - The biggest dark mode pitfall is a bright flash before the dark theme loads. - Pure color inversion**: `filter: invert(1)` breaks images and videos - Images need special treatment in dark mode. - This script must be synchronous (not deferred) and must read from `localStorage` or `matchMedia`. ## Implementation Approaches | Approach | Pros | Cons | | --- | --- | --- | | `prefers-color-scheme` only | Automatic, zero JS | No manual toggle | | Class toggle (`.dark`) | Manual control, JS toggle | Requires JS, FOUC risk | | Combined | Best of both | More complex | ## Custom Properties Strategy Define all colors as custom properties and swap them for dark mode: ```css :root { --bg-primary: #ffffff; --text-primary: #1a1a2e; --border: #e2e8f0; } .dark { --bg-primary: #0f172a; --text-primary: #e2e8f0; --border: #334155; } ``` ## Preventing Flash of Wrong Theme (FOWT) The biggest dark mode pitfall is a bright flash before the dark theme loads. The fix requires an inline script in `<head>` that applies the theme class before any rendering occurs. This script must be synchronous (not deferred) and must read from `localStorage` or `matchMedia`. ## Common Pitfalls - **Pure color inversion**: `filter: invert(1)` breaks images and videos - **Too dark backgrounds**: Pure `#000` is harsh — use dark gray (#0f172a) - **Insufficient contrast**: Test all text/background combinations in both modes - **Hardcoded colors**: Any color not using custom properties breaks in dark mode - **Image backgrounds**: Light images need dark overlays in dark mode ## Image Handling Images need special treatment in dark mode. Photos are usually fine, but screenshots, diagrams, and logos with light backgrounds look harsh. Solutions include reducing brightness, adding subtle borders, or providing alternate dark-mode image variants. Generate dark mode color schemes with the Peasy color tools — automatic contrast checking for both light and dark themes. ### CSS Nesting: Native Syntax vs Preprocessor Nesting Compare native CSS nesting with Sass/Less nesting syntax. Understand the differences, browser support, migration path, and whether you still need a CSS preprocessor in 2026. - URL: https://peasycss.com/guides/css-nesting-native-vs-preprocessor/ - Category: Comparison - Reading time: 1 min - Words: 286 Key takeaways: - CSS nesting — the feature that made Sass indispensable for over a decade — is now native in all modern browsers. - & .title { font-size: 1.25rem; } - If you use Sass primarily for nesting and variables, native CSS now covers both. - CSS nesting is supported in Chrome 120+, Firefox 117+, and Safari 17.2+ (all released late 2023 / early 2024). ## Native CSS Nesting Is Here CSS nesting — the feature that made Sass indispensable for over a decade — is now native in all modern browsers. You can write nested selectors directly in plain CSS without any build step or preprocessor. ## Syntax Comparison ```css /* Native CSS nesting */ .card { background: white; & .title { font-size: 1.25rem; } &:hover { box-shadow: 0 4px 12px rgb(0 0 0 / 0.1); } @media (min-width: 768px) { padding: 2rem; } } /* Sass nesting (identical result) */ .card { background: white; .title { font-size: 1.25rem; } &:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } @media (min-width: 768px) { padding: 2rem; } } ``` ## Key Differences | Feature | Native CSS | Sass | Less | | --- | --- | --- | --- | | `&` for compound | Required for type selectors | Optional | Optional | | `@media` nesting | Yes (native) | Yes | Yes | | Variables | Custom properties (runtime) | `$var` (compile-time) | `@var` | | Mixins | No | Yes | Yes | | Functions | Limited (`calc()`, etc.) | Rich | Limited | | Build step | None | Required | Required | ## Do You Still Need Sass? If you use Sass primarily for nesting and variables, native CSS now covers both. Sass remains valuable for mixins, functions, `@extend`, and complex logic. Evaluate your actual Sass usage — many projects can drop the preprocessor entirely. ## Browser Support CSS nesting is supported in Chrome 120+, Firefox 117+, and Safari 17.2+ (all released late 2023 / early 2024). For older browser support, continue using a preprocessor or PostCSS nesting plugin as a compilation step. ### Gradient Design Trends and Techniques for 2025-2026 Gradients have evolved far beyond simple two-color linear fills. Modern gradient techniques include mesh gradients, noise overlays, and animated transitions that add depth and dimension to interfaces. - URL: https://peasycss.com/guides/gradient-design-trends-techniques/ - Category: How-To - Reading time: 1 min - Words: 256 Key takeaways: - After years of flat design dominance, gradients have returned with more sophistication. - The simplest form: color transitions along a straight axis. - Use analogous colors for smooth transitions and complementary colors for vibrant energy - CSS gradients render on the GPU and cost virtually nothing in performance. ## The Gradient Renaissance After years of flat design dominance, gradients have returned with more sophistication. Instagram's logo refresh in 2016 kicked off the revival, and today gradients appear in hero sections, buttons, backgrounds, and even typography. ## Types of Gradients ### Linear Gradients The simplest form: color transitions along a straight axis. Control the angle (0-360 degrees) and add multiple color stops to create banding or smooth transitions. CSS syntax: `linear-gradient(135deg, #667eea, #764ba2)`. ### Radial Gradients Colors radiate outward from a center point. Useful for spotlight effects, button glows, and focal-point backgrounds. Adjust the shape (circle vs ellipse) and the size to control how the gradient spreads. ### Conic Gradients Colors rotate around a center point like a color wheel. Ideal for pie-chart-style indicators, progress rings, and decorative elements. CSS: `conic-gradient(from 45deg, red, blue, red)`. ### Mesh Gradients Multiple control points create organic, multi-tonal blends that mimic real-world lighting. Mesh gradients are typically created in design tools like Figma or Illustrator and exported as SVG or raster images. ## Gradient Best Practices - Use analogous colors for smooth transitions and complementary colors for vibrant energy - Add a subtle noise overlay (2-4% opacity) to eliminate banding artifacts on large gradient areas - Test gradients on both light and dark backgrounds - Keep text readable by ensuring sufficient contrast between the gradient background and foreground text ## Performance Note CSS gradients render on the GPU and cost virtually nothing in performance. Avoid replacing them with image files unless you need mesh-gradient fidelity that CSS cannot reproduce. ### CSS Cascade Layers: Managing Specificity at Scale Learn CSS cascade layers (`@layer`) — the solution to specificity wars in large codebases. Control which styles override others regardless of selector specificity, enabling clean architecture in complex projects. - URL: https://peasycss.com/guides/css-cascade-layers-managing-specificity/ - Category: Best Practice - Reading time: 1 min - Words: 253 Key takeaways: - In large projects, CSS specificity becomes unmanageable. - Cascade layers create explicit priority groups. - /* Declare layer order (lowest to highest priority) */ - Cascade layers are supported in all modern browsers since early 2022 (Chrome 99+, Firefox 97+, Safari 15.4+). - Third-party component libraries use high-specificity selectors that your custom styles cannot override without `!important`. ## The Specificity Problem at Scale In large projects, CSS specificity becomes unmanageable. Third-party component libraries use high-specificity selectors that your custom styles cannot override without `!important`. Utility classes fight with component styles. Each developer escalates specificity to win, creating an unwinnable arms race. ## How @layer Works Cascade layers create explicit priority groups. Styles in a higher-priority layer always win over styles in a lower-priority layer, regardless of specificity. A simple `.button` class in the `overrides` layer beats `#app .sidebar .button` in the `base` layer. ## Layer Declaration ```css /* Declare layer order (lowest to highest priority) */ @layer reset, base, components, utilities; /* Add styles to layers */ @layer reset { * { margin: 0; box-sizing: border-box; } } @layer base { body { font-family: system-ui; line-height: 1.5; } } @layer components { .card { padding: 1.5rem; border: 1px solid var(--border); } } @layer utilities { .hidden { display: none; } .text-center { text-align: center; } } ``` ## Practical Architecture | Layer | Content | Priority | | --- | --- | --- | | reset | CSS reset, normalize | Lowest | | base | Typography, colors, defaults | Low | | third-party | External libraries | Medium | | components | Custom components | High | | utilities | Utility classes | Highest | ## Browser Support Cascade layers are supported in all modern browsers since early 2022 (Chrome 99+, Firefox 97+, Safari 15.4+). For older browsers, layers are ignored and styles fall back to normal cascade behavior. ### CSS aspect-ratio: Responsive Media Without Padding Hacks Replace the decades-old padding-bottom hack for maintaining aspect ratios with the native CSS aspect-ratio property. Covers responsive images, videos, and container sizing with clean modern CSS. - URL: https://peasycss.com/guides/css-aspect-ratio-responsive-media/ - Category: How-To - Reading time: 1 min - Words: 259 Key takeaways: - For years, maintaining aspect ratios required the padding-bottom percentage hack — setting `padding-bottom: 56.25%` on a container for a 16:9 ratio. - aspect-ratio: 1; /* Shorthand for 1 / 1 */ - Combine `aspect-ratio` with `object-fit` for responsive images that maintain their ratio without distortion: - Setting `aspect-ratio` on images and videos reserves space before the content loads, eliminating Cumulative Layout Shift (CLS). - The `aspect-ratio` property is supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+). ## The Padding Hack Is Dead For years, maintaining aspect ratios required the padding-bottom percentage hack — setting `padding-bottom: 56.25%` on a container for a 16:9 ratio. This worked because vertical padding percentages are based on width, but the approach was confusing, fragile, and required inner wrapper elements. The native `aspect-ratio` property replaces it entirely. ## Modern Syntax ```css .video-container { aspect-ratio: 16 / 9; width: 100%; } .square-avatar { aspect-ratio: 1; /* Shorthand for 1 / 1 */ width: 4rem; } ``` ## Common Aspect Ratios | Ratio | Value | Use Case | | --- | --- | --- | | 16:9 | `16 / 9` | Video, hero images | | 4:3 | `4 / 3` | Classic photos, thumbnails | | 1:1 | `1` | Avatars, social media cards | | 3:2 | `3 / 2` | Photography, product images | | 21:9 | `21 / 9` | Cinematic banners | | 9:16 | `9 / 16` | Vertical video (Stories, Reels) | ## Responsive Images Combine `aspect-ratio` with `object-fit` for responsive images that maintain their ratio without distortion: ```css img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; } ``` ## Preventing Layout Shift Setting `aspect-ratio` on images and videos reserves space before the content loads, eliminating Cumulative Layout Shift (CLS). Combine with `width` and `height` HTML attributes for maximum layout stability. ## Browser Support The `aspect-ratio` property is supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+). For the small percentage of older browsers, the padding-bottom fallback can coexist safely. ### Scroll-Driven Animations: Triggering CSS Animations on Scroll Learn the new CSS Scroll-Driven Animations API — trigger animations based on scroll position without JavaScript. Covers scroll() and view() timelines, browser support, and progressive enhancement. - URL: https://peasycss.com/guides/scroll-driven-animations-css-guide/ - Category: How-To - Reading time: 1 min - Words: 252 Key takeaways: - The CSS Scroll-Driven Animations specification introduces two new animation timelines: `scroll()` (linked to scroll position) and `view()` (linked to element visibility). - The animation progresses from 0% to 100% as the user scrolls from top to bottom. - The `view()` timeline triggers based on an element's visibility in the viewport: - Scroll-driven animations are supported in Chrome 115+ and Edge 115+. ## Scroll Animations Without JavaScript The CSS Scroll-Driven Animations specification introduces two new animation timelines: `scroll()` (linked to scroll position) and `view()` (linked to element visibility). These replace JavaScript scroll listeners for common patterns like progress bars, parallax effects, and reveal animations. ## Scroll Progress Timeline ```css .progress-bar { animation: fill-bar linear; animation-timeline: scroll(); } @keyframes fill-bar { from { width: 0%; } to { width: 100%; } } ``` The animation progresses from 0% to 100% as the user scrolls from top to bottom. No JavaScript, no IntersectionObserver, no scroll event handlers. ## View Progress Timeline The `view()` timeline triggers based on an element's visibility in the viewport: ```css .fade-in { animation: appear linear; animation-timeline: view(); animation-range: entry 0% entry 100%; } @keyframes appear { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } ``` ## Animation Range | Range | Meaning | | --- | --- | | `entry 0%` | Element starts entering viewport | | `entry 100%` | Element fully inside viewport | | `exit 0%` | Element starts leaving viewport | | `exit 100%` | Element fully outside viewport | | `contain 0%` | Element just fully contained | | `cover 0%` | Element starts covering scroll port | ## Browser Support Scroll-driven animations are supported in Chrome 115+ and Edge 115+. Firefox and Safari support is in progress. Use `@supports (animation-timeline: scroll())` for progressive enhancement — the animation simply will not play in unsupported browsers, which is a graceful degradation. ### Trigonometry Basics for Developers and Designers Trigonometric functions power animations, game physics, audio visualization, and SVG path generation. This guide covers sin, cos, and tan with practical code examples. - URL: https://peasycss.com/guides/trigonometry-basics-for-developers/ - Category: How-To - Reading time: 2 min - Words: 304 Key takeaways: - Trigonometry is the math of angles and distances. - For a right triangle with angle θ: - Most programming languages use radians. - Place points on a circle of radius r centered at (cx, cy): ## Why Developers Need Trigonometry Trigonometry is the math of angles and distances. It underlies circular motion, wave animations, audio waveforms, radar charts, analog clocks, and collision detection. Understanding sine and cosine unlocks an enormous range of visual and interactive effects. ## The Big Three Functions For a right triangle with angle θ: - **sin(θ)** = opposite / hypotenuse - **cos(θ)** = adjacent / hypotenuse - **tan(θ)** = opposite / adjacent = sin / cos ## Radians vs Degrees Most programming languages use radians. Convert with: - Degrees to radians: `rad = deg * (π / 180)` - Radians to degrees: `deg = rad * (180 / π)` Full circle = 360° = 2π radians. ## Practical Applications ### Circular Motion Place points on a circle of radius r centered at (cx, cy): `x = cx + r * cos(angle)` `y = cy + r * sin(angle)` Distribute 12 items evenly: increment angle by 2π/12 = 30° between each. ### Wave Animation A sine wave oscillates between -1 and 1. Control amplitude (height), frequency (speed), and phase (offset): `y = amplitude * sin(frequency * x + phase)` ### Rotation Rotate point (x, y) by angle θ around the origin: `x' = x * cos(θ) - y * sin(θ)` `y' = x * sin(θ) + y * cos(θ)` ### Distance and Angle Between Points Distance: `d = sqrt((x2-x1)² + (y2-y1)²)` Angle: `θ = atan2(y2-y1, x2-x1)` Use `atan2` instead of `atan` because it handles all four quadrants correctly. ## Quick Reference | Angle | sin | cos | tan | |-------|-----|-----|-----| | 0° | 0 | 1 | 0 | | 30° | 0.5 | 0.866 | 0.577 | | 45° | 0.707 | 0.707 | 1 | | 90° | 1 | 0 | undefined | | 180° | 0 | … ### CSS Subgrid: Aligning Nested Grid Items Across Tracks Learn CSS subgrid — the feature that solves nested grid alignment. Understand how child elements can participate in their grandparent's grid, enabling card layouts with perfectly aligned content. - URL: https://peasycss.com/guides/css-subgrid-aligning-nested-grid-items/ - Category: Troubleshooting - Reading time: 1 min - Words: 268 Key takeaways: - When you place cards in a CSS Grid, each card is a grid item. - grid-template-columns: repeat(3, 1fr); - Product cards**: Price, title, and 'Add to Cart' aligned across cards - Subgrid is supported in all modern browsers (Chrome 117+, Firefox 71+, Safari 16+). ## The Nested Grid Problem When you place cards in a CSS Grid, each card is a grid item. But the content inside each card — title, description, footer — creates a separate formatting context. Titles of different lengths cause descriptions and footers to misalign across cards. Subgrid solves this by letting inner elements participate in the outer grid's row tracks. ## How Subgrid Works ```css .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: subgrid; /* Not here — on children */ gap: 1.5rem; } .card { display: grid; grid-row: span 3; /* Card spans 3 parent rows */ grid-template-rows: subgrid; /* Inherit parent's row tracks */ } ``` Each card's title, content, and footer now snap to the same row tracks, creating perfect horizontal alignment across the grid. ## Before and After Subgrid | Without Subgrid | With Subgrid | | --- | --- | | Card heights vary | Cards share row tracks | | Footers misalign | Footers align horizontally | | Requires fixed heights | Content drives sizing | | JavaScript alignment hacks | Pure CSS solution | ## Common Use Cases - **Product cards**: Price, title, and 'Add to Cart' aligned across cards - **Feature comparisons**: Rows align across columns - **Form layouts**: Labels and inputs align in nested fieldsets - **Navigation menus**: Submenu items align with parent grid ## Browser Support Subgrid is supported in all modern browsers (Chrome 117+, Firefox 71+, Safari 16+). For older browsers, the inner grid falls back to independent sizing, which is functional but not perfectly aligned. Experiment with subgrid layouts using the Peasy CSS grid builder. ### CSS Animation Performance: What to Animate and What to Avoid Not all CSS properties are equal when it comes to animation performance. Animating the wrong property can drop frame rates to single digits. Learn which properties trigger GPU acceleration and which to avoid. - URL: https://peasycss.com/guides/css-animation-performance-guide/ - Category: Troubleshooting - Reading time: 1 min - Words: 258 Key takeaways: - Browsers render pages in four stages: Style calculation, Layout, Paint, and Composite. - Animate only `transform` and `opacity`. - The CSS `will-change` property tells the browser to prepare a GPU layer for an element before the animation starts. - Use Chrome DevTools Performance panel to record animations. ## The Rendering Pipeline Browsers render pages in four stages: Style calculation, Layout, Paint, and Composite. Animating a property that triggers an earlier stage forces all subsequent stages to re-run every frame. ## Property Tiers | Tier | Triggers | Properties | Performance | |------|----------|------------|------------| | Composite-only | Composite | `transform`, `opacity` | Excellent (GPU) | | Paint | Paint + Composite | `color`, `background`, `box-shadow` | Moderate | | Layout | Layout + Paint + Composite | `width`, `height`, `margin`, `padding` | Poor | ## The Golden Rule Animate only `transform` and `opacity`. These two properties are handled entirely on the GPU compositor thread, meaning they do not block the main thread and maintain 60fps even on budget mobile devices. ### Replacing Layout Animations Instead of animating `width` from 0 to 100%, use `transform: scaleX(0)` to `scaleX(1)`. Instead of animating `top` or `left`, use `transform: translateX()` or `translateY()`. The visual result is identical but performance improves dramatically. ## Will-Change Hint The CSS `will-change` property tells the browser to prepare a GPU layer for an element before the animation starts. Use it sparingly — one or two elements per page at most. Overuse creates excessive GPU memory consumption. ```css .card { will-change: transform; } .card:hover { transform: translateY(-4px); } ``` ## Measuring Performance Use Chrome DevTools Performance panel to record animations. Look for green bars (paint) and purple bars (layout) in the flame chart. An animation that only shows yellow (scripting) and green-composite bars is well-optimized. Enable the FPS counter overlay to spot frame drops in real time. ### Design Token Management: Bridging Design and Development Design tokens are the single source of truth for colors, spacing, typography, and other visual properties. Managing them well eliminates design-development inconsistencies. - URL: https://peasycss.com/guides/design-token-management/ - Category: Best Practice - Reading time: 1 min - Words: 250 Key takeaways: - Design tokens are named values that represent design decisions: `color-primary-500`, `spacing-lg`, `font-size-heading-1`. - Raw values with no semantic meaning: `blue-500`, `gray-100`, `4px`. - Store tokens in a platform-agnostic format (JSON or YAML) and transform them into platform-specific outputs: CSS custom properties for web, Swift/Kotlin constants for mobile, XML for Android. - Treat your token file like a library with semantic versioning. ## What Are Design Tokens Design tokens are named values that represent design decisions: `color-primary-500`, `spacing-lg`, `font-size-heading-1`. They abstract raw values (like `#3B82F6` or `24px`) behind semantic names, making it easy to update an entire design system by changing a single token. ## Token Categories | Category | Examples | |----------|--------| | Color | primary, secondary, neutral, semantic (error, success, warning) | | Spacing | xs, sm, md, lg, xl, 2xl | | Typography | font-family, font-size, line-height, font-weight | | Border | radius, width, color | | Shadow | sm, md, lg, xl | | Motion | duration, easing | ## Three-Tier Token Architecture ### Global Tokens Raw values with no semantic meaning: `blue-500`, `gray-100`, `4px`. These form the palette from which all other tokens draw. ### Alias Tokens Semantic references to global tokens: `color-primary` points to `blue-500`, `color-surface` points to `gray-100`. Alias tokens encode design intent. ### Component Tokens Scoped to specific components: `button-bg-primary` points to `color-primary`. These provide granular control without changing the global system. ## Storage Formats Store tokens in a platform-agnostic format (JSON or YAML) and transform them into platform-specific outputs: CSS custom properties for web, Swift/Kotlin constants for mobile, XML for Android. Style Dictionary and Tokens Studio are popular tools for this transformation. ## Versioning Tokens Treat your token file like a library with semantic versioning. Breaking changes (renaming or removing tokens) require a major version bump. Adding new tokens is a minor bump. This discipline prevents downstream breakage when teams consume your tokens. ### Brand Color Consistency: Maintaining Colors Across Digital and Print The same hex code can look different on a monitor, a phone screen, and a printed brochure. This guide explains color profiles, gamut mapping, and practical techniques for brand color fidelity. - URL: https://peasycss.com/guides/brand-color-consistency-across-media/ - Category: Troubleshooting - Reading time: 1 min - Words: 278 Key takeaways: - Monitors use RGB light, printers use CMYK inks, and each device has a unique color gamut — the range of colors it can reproduce. - Color profiles define how numbers map to real colors. - CIE Lab is device-independent and represents human-perceived color. - Using CMYK values derived from a simple formula instead of the printer's actual ICC profile ## Why Colors Shift Across Media Monitors use RGB light, printers use CMYK inks, and each device has a unique color gamut — the range of colors it can reproduce. A vibrant electric blue on your monitor may print as a dull navy because CMYK cannot reproduce that specific blue wavelength. ## Color Profiles Color profiles define how numbers map to real colors. The most important profiles: | Profile | Use Case | Gamut | |---------|----------|------| | sRGB | Web, email, social | Standard (smallest) | | Display P3 | Apple devices, HDR | 25% larger than sRGB | | Adobe RGB | Photography, prepress | Wider greens and cyans | | CMYK (Fogra39) | European offset printing | Different shape (less red, more cyan) | ## Practical Workflow ### 1. Define Master Colors in Lab CIE Lab is device-independent and represents human-perceived color. Define your brand colors in Lab first, then derive sRGB, P3, and CMYK values from that reference. ### 2. Create a Brand Color Specification Document every color with its value in each target space: HEX for web, P3 for Apple, Pantone for spot-color printing, CMYK for process printing. Include acceptable tolerance ranges. ### 3. Soft-Proof Before Printing Use Photoshop or Acrobat soft-proofing (View > Proof Colors) with the printer's ICC profile to preview how digital colors will look on paper. Adjust problem areas before sending to press. ## Common Mistakes - Using CMYK values derived from a simple formula instead of the printer's actual ICC profile - Assuming Display P3 colors will look the same on sRGB monitors - Not testing brand colors on both OLED and LCD screens, which render saturated colors differently ### HDR Video: Formats, Compatibility, and Tone Mapping HDR video offers wider color range and higher contrast than SDR. Understanding HDR formats and tone mapping ensures your content displays correctly across devices. - URL: https://peasycss.com/guides/hdr-video-formats-compatibility/ - Category: Comparison - Reading time: 1 min - Words: 239 Key takeaways: - Standard Dynamic Range (SDR) uses 8-bit color (16.7 million colors) and a limited brightness range. - Open standard, widely supported. - When HDR content plays on an SDR display, tone mapping compresses the wider dynamic range into the display's capabilities. - YouTube supports HDR10 and HLG. - Master in HDR10 for maximum compatibility ## What HDR Adds Standard Dynamic Range (SDR) uses 8-bit color (16.7 million colors) and a limited brightness range. HDR expands to 10-bit (1 billion colors) or 12-bit color with peak brightness up to 10,000 nits versus SDR's ~100 nits. ## HDR Standards ### HDR10 Open standard, widely supported. Uses static metadata — one brightness setting for the entire video. Supported by virtually all HDR displays. ### HDR10+ Samsung's extension with dynamic metadata — brightness optimization per scene or per frame. Supported by Samsung TVs and Amazon Prime Video. ### Dolby Vision Premium format with 12-bit color and dynamic metadata. Requires licensing but offers the best quality. Supported by Apple, Netflix, Disney+, and premium TVs. ### HLG (Hybrid Log-Gamma) Broadcast-focused standard compatible with both HDR and SDR displays without metadata. Used by BBC, NHK, and YouTube. ## Tone Mapping When HDR content plays on an SDR display, tone mapping compresses the wider dynamic range into the display's capabilities. Poor tone mapping causes washed-out or oversaturated images. ## Web Delivery YouTube supports HDR10 and HLG. Upload in VP9 or AV1 with HDR metadata. Safari supports Dolby Vision in HLS streams. Chrome supports HDR10 via WebM/AV1. ## Practical Advice - Master in HDR10 for maximum compatibility - Always provide an SDR fallback - Use HLG for content that must work on both HDR and SDR - Test on actual HDR displays — monitors and SDR previews cannot accurately represent HDR content ### Figma to CSS Export: A Complete Workflow Guide Translating Figma designs into production CSS requires more than copying values from the inspect panel. This workflow covers design tokens, responsive adaptations, and handoff best practices. - URL: https://peasycss.com/guides/figma-to-css-export-workflow/ - Category: How-To - Reading time: 1 min - Words: 299 Key takeaways: - Figma designs are pixel-perfect mockups at fixed dimensions. - Before writing any CSS, extract the design system foundations from Figma: colors (fill values), typography (font family, size, weight, line height), spacing (auto layout gaps and padding), border radius, and shadows. - For each Figma component, decide the HTML structure. - Figma's Inspect panel gives absolute pixel values. - Figma variants show hover, focus, active, and disabled states. ## The Gap Between Design and Code Figma designs are pixel-perfect mockups at fixed dimensions. Production CSS must handle fluid widths, dynamic content, and edge cases that designers cannot anticipate. The goal of export is not pixel matching but intent matching. ## Step 1: Extract Design Tokens Before writing any CSS, extract the design system foundations from Figma: colors (fill values), typography (font family, size, weight, line height), spacing (auto layout gaps and padding), border radius, and shadows. Map these to CSS custom properties. ## Step 2: Map Components to HTML For each Figma component, decide the HTML structure. A Figma auto-layout frame might become a flex container, a grid, or a simple block element depending on content flow requirements. ## Step 3: Write Responsive CSS Figma's Inspect panel gives absolute pixel values. Convert these to relative units where appropriate: | Figma Value | CSS Conversion | When to Use | |-------------|---------------|------------| | 16px font | 1rem | Body text | | 1200px container | max-width: 75rem | Layout containers | | 24px gap | gap: 1.5rem | Flex/grid gaps | | 360px fixed width | width: 100%; max-width: 22.5rem | Cards | ## Step 4: Handle States and Interactions Figma variants show hover, focus, active, and disabled states. Translate each variant into the corresponding CSS pseudo-class. Ensure focus states include visible outlines for keyboard navigation. ## Step 5: Export Assets Export icons as SVG, images as WebP (with JPEG fallback), and illustrations as SVG where possible. Use Figma's export presets to generate multiple resolutions (1x, 2x, 3x) for raster assets. ## Common Pitfalls - Copying box-shadow values verbatim when the design uses inner shadows (CSS `inset`) - Forgetting that Figma's blend modes may not have exact CSS equivalents - Hardcoding pixel widths that should be percentage or viewport-based ### Image Color Spaces Explained: sRGB vs Adobe RGB vs Display P3 Color spaces determine how colors are represented in digital images. Using the wrong color space causes colors to appear muted or oversaturated. This guide explains when to use sRGB, Adobe RGB, and Display P3. - URL: https://peasycss.com/guides/image-color-spaces-srgb-adobe-rgb-p3/ - Category: Comparison - Reading time: 2 min - Words: 427 Key takeaways: - A color space defines a specific range (gamut) of colors that can be represented. - sRGB (Standard RGB) was created in 1996 by HP and Microsoft as a universal color space for monitors, printers, and the web. - Adobe RGB (1998) covers about 50% of the visible spectrum, adding richer cyans and greens that sRGB cannot represent. - Display P3, based on the DCI-P3 cinema standard, covers about 45% of the visible spectrum. - Always export for the web in sRGB unless you specifically know your audience has P3-capable displays. ## What Is a Color Space? A color space defines a specific range (gamut) of colors that can be represented. Think of it as a palette — sRGB is a small palette with 16.7 million colors, while Display P3 is a larger palette that includes more vivid greens, reds, and oranges. An image's color space tells software how to interpret its color values. ## sRGB: The Web Standard sRGB (Standard RGB) was created in 1996 by HP and Microsoft as a universal color space for monitors, printers, and the web. It covers approximately 35% of the visible color spectrum — a relatively small gamut, but its universality is its strength. **Use sRGB when:** Publishing images on the web, sending photos via email, sharing on social media, or preparing images for standard office printing. Virtually every screen displays sRGB correctly without color management. ## Adobe RGB Adobe RGB (1998) covers about 50% of the visible spectrum, adding richer cyans and greens that sRGB cannot represent. It was designed for professional print workflows where CMYK conversion benefits from a wider starting gamut. **Use Adobe RGB when:** Preparing images for commercial printing (magazines, fine art prints), working in a color-managed environment with calibrated monitors, or when the final output is CMYK. **Warning:** Adobe RGB images displayed on non-color-managed software (most web browsers before 2020, many email clients) appear desaturated. The wider gamut values get squashed into sRGB range, making colors look dull. ## Display P3 Display P3, based on the DCI-P3 cinema standard, covers about 45% of the visible spectrum. Apple adopted P3 for all screens since 2016 (iPhone 7, MacBook Pro, iMac). Modern Android flagships and OLED monitors also support P3. **Use Display P3 when:** Targeting modern devices with P3-capable screens, creating digital-only content where vivid colors matter (marketing, product photography), or … ### Animated WebP vs GIF vs APNG: Modern Animation Format Comparison GIF is no longer the only option for short web animations. Animated WebP and APNG offer better compression and color depth while maintaining broad browser support. - URL: https://peasycss.com/guides/animated-webp-vs-gif-vs-apng/ - Category: Comparison - Reading time: 1 min - Words: 274 Key takeaways: - The original web animation format (1987). - GIF: Email campaigns (universal support), legacy platforms, simple UI animations under 50 KB. - Convert GIFs to animated WebP for 60-70% size savings ## Format Overview ### GIF The original web animation format (1987). Limited to 256 colors per frame with LZW compression. File sizes are large by modern standards, but support is universal. ### APNG (Animated PNG) An extension of PNG that adds frame animation. Supports full 24-bit color (16.7 million colors) with alpha transparency. Non-APNG viewers display the first frame as a static PNG — graceful degradation. ### Animated WebP Google's animated image format using VP8 compression. Supports both lossy and lossless modes with alpha transparency. Typically 50-80% smaller than equivalent GIFs. ## Comparison | Feature | GIF | APNG | WebP | |---------|-----|------|------| | Colors | 256 | 16.7M | 16.7M | | Transparency | Binary | Full alpha | Full alpha | | Compression | LZW | Deflate | VP8/VP8L | | Size (vs GIF) | Baseline | 20-50% smaller | 50-80% smaller | | Browser support | 100% | 97%+ | 97%+ | | Max dimensions | 65535px | 2^31 px | 16383px | | Lossy mode | No | No | Yes | ## When to Use Each **GIF:** Email campaigns (universal support), legacy platforms, simple UI animations under 50 KB. **APNG:** When you need full-color transparency animation with PNG-like quality. Icons, logos, and UI elements where color accuracy matters. **Animated WebP:** General web use where smallest file size is priority. Best default choice for modern web projects. ## Conversion Tips - Convert GIFs to animated WebP for 60-70% size savings - Use APNG when transparency quality is critical - Always provide a GIF fallback for email contexts - Test autoplay behavior — some browsers restrict animation based on accessibility settings ### Micro-Interaction Design Patterns for Delightful UX Micro-interactions are subtle animations that respond to user actions — a button bounce on click, a toggle slide, a checkmark draw. They make interfaces feel alive and provide immediate feedback. - URL: https://peasycss.com/guides/micro-interaction-design-patterns/ - Category: How-To - Reading time: 1 min - Words: 294 Key takeaways: - A successful micro-interaction has four parts: a trigger (user action or system event), rules (what happens), feedback (what the user sees), and loops/modes (what happens on repeat or over time). - A button that snaps down 2px on click and returns on release simulates physical button behavior. - Some users experience motion sickness from screen animations. - Always wrap animations in a `prefers-reduced-motion` media query and provide a static fallback. ## What Makes a Good Micro-Interaction A successful micro-interaction has four parts: a trigger (user action or system event), rules (what happens), feedback (what the user sees), and loops/modes (what happens on repeat or over time). Each part should be intentional, not decorative. ## Common Patterns ### Button Feedback A button that snaps down 2px on click and returns on release simulates physical button behavior. Add a subtle scale transform (0.97) for a satisfying press effect. Duration: 100-150ms with ease-out easing. ### Toggle Switches The thumb slides from left to right while the track color transitions. Use a spring easing for the thumb movement and a linear transition for the color change. Duration: 200-300ms. ### Loading Indicators Replace static spinners with skeleton screens that match the layout of incoming content. A subtle shimmer animation (a moving linear-gradient highlight) communicates that content is loading without the anxiety of a spinner. ### Form Validation Shake the input field gently (translateX 3px oscillation, 3 cycles, 300ms) on validation error. Combine with a red border transition and an error message that slides in from above. For success, draw a checkmark SVG path with stroke-dashoffset animation. ## Performance Guidelines | Rule | Reason | |------|--------| | Duration under 400ms | Longer feels sluggish | | Animate transform/opacity only | GPU-composited, no layout thrashing | | Respect prefers-reduced-motion | Accessibility for vestibular disorders | | No animation on page load | Let content appear instantly | ## The Reduced Motion Imperative Some users experience motion sickness from screen animations. Always wrap animations in a `prefers-reduced-motion` media query and provide a static fallback. This is not optional — it is an accessibility requirement. ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` ### PDF Print Production: Settings for Professional Output Printing a PDF that looks perfect on screen but terrible on paper is a costly mistake. Professional print production requires specific PDF settings — bleed, color mode, resolution, and marks — that differ significantly from screen-optimized PDFs. - URL: https://peasycss.com/guides/pdf-print-production-settings/ - Category: Troubleshooting - Reading time: 2 min - Words: 424 Key takeaways: - A PDF optimized for screen viewing (72-150 DPI, sRGB color, no bleed) will produce poor print results: pixelated images, inaccurate colors, and content cut off at the edges. - Bleed is the area beyond the trim edge where your design extends. - PDF/X is a subset of PDF designed for print production. - Before sending to the printer, verify: - The most expensive print mistake is not requesting a proof. ## Screen vs Print: Key Differences A PDF optimized for screen viewing (72-150 DPI, sRGB color, no bleed) will produce poor print results: pixelated images, inaccurate colors, and content cut off at the edges. Print-ready PDFs require specific technical settings that most users never encounter in digital workflows. ## Essential Print Settings ### Bleed Bleed is the area beyond the trim edge where your design extends. Printers cannot print exactly to the edge of a sheet — they print slightly oversized and then trim. Without bleed, you get thin white lines along the edges where ink coverage doesn't reach the trim line. Standard bleed: 3mm (0.125 inches) on all sides. Your document dimensions should be the trim size plus bleed. For an A4 document (210×297mm), the bleed-included size is 216×303mm. ### Color Mode: CMYK vs RGB Screens use RGB (additive light), printers use CMYK (subtractive ink). RGB colors that look vibrant on screen — especially bright blues, greens, and oranges — may print as muted, brownish versions. Convert all colors to CMYK early in the design process to avoid surprises. Verify with a printed proof. ### Image Resolution | Image Type | Minimum DPI | Recommended DPI | |------------|------------|------------------| | Photographs | 250 | 300 | | Line art / illustrations | 600 | 1200 | | Text (rasterized) | 600 | 1200 | | Logos (rasterized) | 300 | Use vector when possible | ### Printer's Marks Include crop marks (show trim lines), registration marks (align color plates), and color bars (verify ink density). These marks fall outside the trim area in the bleed zone and are removed during finishing. ## PDF/X Standards PDF/X is a subset of PDF designed for print production. The most common standard is PDF/X-1a (CMYK only, all fonts embedded, no transparency). For modern print … ## Glossary (44 terms) ### Anchor Positioning (CSS Anchor Positioning) A layout feature that positions elements relative to a named anchor element, useful for tooltips and popovers. - URL: https://peasycss.com/glossary/anchor-positioning/ ### Aspect Ratio (CSS) (CSS aspect-ratio Property) A property that sets a preferred width-to-height ratio for an element, preventing layout shift during loading. - URL: https://peasycss.com/glossary/aspect-ratio-css/ ### BEM (Block Element Modifier) A CSS naming convention using block__element--modifier format to create reusable, maintainable class names. - URL: https://peasycss.com/glossary/bem/ ### Box Model (CSS Box Model) The layout model where every element is a box with content, padding, border, and margin areas. - URL: https://peasycss.com/glossary/box-model/ ### Calc (CSS calc() Function) A function for performing arithmetic calculations with mixed units in CSS property values (e.g. calc(100% - 2rem)). - URL: https://peasycss.com/glossary/calc/ ### Cascade (CSS Cascade) The mechanism by which browsers resolve conflicting CSS declarations based on origin, specificity, and order. - URL: https://peasycss.com/glossary/cascade/ ### Clamp (CSS clamp() Function) A function constraining a value between a minimum and maximum, enabling fluid responsive typography and spacing. - URL: https://peasycss.com/glossary/clamp/ ### Color Function (CSS Color Function) Modern CSS functions for defining colors: oklch(), oklab(), color(), hsl(), hwb(), with improved perceptual uniformity. - URL: https://peasycss.com/glossary/color-function/ ### Color Mix (CSS color-mix() Function) A function that blends two colors in a specified color space by a given percentage, replacing manual hex math. - URL: https://peasycss.com/glossary/color-mix/ ### Container Query (CSS Container Query) A conditional rule applying styles based on the size of a parent container rather than the viewport. - URL: https://peasycss.com/glossary/container-query/ ### Content Visibility (CSS content-visibility Property) A property enabling the browser to skip rendering of off-screen elements, dramatically improving initial page load. - URL: https://peasycss.com/glossary/content-visibility/ ### CSS max() (CSS max() Function) A comparison function returning the largest value from a list, useful for responsive sizing with lower bounds. - URL: https://peasycss.com/glossary/css-max/ ### CSS min() (CSS min() Function) A comparison function returning the smallest value from a list, useful for responsive sizing with upper bounds. - URL: https://peasycss.com/glossary/css-min/ ### CSS Nesting Selector (CSS & Nesting Selector) The & character in native CSS nesting representing the parent selector, mirroring Sass nesting behavior. - URL: https://peasycss.com/glossary/css-nesting-selector/ ### CSS Paint API (CSS Houdini Paint API) A low-level API allowing JavaScript to draw directly into an element's background using a paint worklet. - URL: https://peasycss.com/glossary/css-paint-api/ ### CSS Scope (CSS @scope Rule) A rule that limits style application to a specific DOM subtree, preventing styles from leaking in or out. - URL: https://peasycss.com/glossary/css-scope/ ### Custom Properties Inheritance (CSS Custom Properties Inheritance) The mechanism by which CSS custom properties cascade down the DOM tree, inheritable by default unlike regular properties. - URL: https://peasycss.com/glossary/custom-properties-inheritance/ ### Custom Property (CSS Custom Property (Variable)) A user-defined property (--name) that stores reusable values, accessible via the var() function. - URL: https://peasycss.com/glossary/custom-property/ ### Flexbox (CSS Flexible Box Layout) A one-dimensional layout model for distributing space and aligning items in a row or column. - URL: https://peasycss.com/glossary/flexbox/ ### Grid (CSS Grid Layout) A two-dimensional layout system for creating complex web layouts with rows and columns simultaneously. - URL: https://peasycss.com/glossary/grid/ ### :has() Selector (CSS :has() Relational Pseudo-class) A parent selector that matches elements containing descendants matching a given selector, enabling upward DOM selection. - URL: https://peasycss.com/glossary/has-selector/ ### Keyframe Animation (CSS @keyframes Animation) A set of style rules defining intermediate steps in a CSS animation sequence using percentage waypoints. - URL: https://peasycss.com/glossary/keyframe-animation/ ### lab() (CSS lab() Color Function) A CSS color function based on the CIE Lab color space, providing device-independent color specification. - URL: https://peasycss.com/glossary/lab/ ### Layer (CSS @layer Cascade Layer) A mechanism for organizing CSS into explicit layers that control the order of precedence in the cascade. - URL: https://peasycss.com/glossary/layer/ ### Logical Property (CSS Logical Property) Properties using flow-relative directions (inline-start, block-end) instead of physical ones (left, top) for i18n support. - URL: https://peasycss.com/glossary/logical-property/ ### Media Query (CSS Media Query) A conditional rule applying styles only when the device matches specified criteria (width, orientation, etc.). - URL: https://peasycss.com/glossary/media-query/ ### Nesting (CSS Nesting) Native CSS feature allowing selectors to be nested inside parent rules using the & symbol, reducing repetition. - URL: https://peasycss.com/glossary/nesting/ ### oklch() (CSS oklch() Color Function) A perceptually uniform color function using Lightness, Chroma, and Hue, producing consistent visual results across the gamut. - URL: https://peasycss.com/glossary/oklch/ ### Popover (HTML Popover API) A native HTML attribute for creating dismissible overlay content without JavaScript, styled with CSS ::backdrop. - URL: https://peasycss.com/glossary/popover/ ### Pseudo-class (CSS Pseudo-class) A keyword added to selectors targeting elements in a specific state (e.g. :hover, :focus, :nth-child). - URL: https://peasycss.com/glossary/pseudo-class/ ### Pseudo-element (CSS Pseudo-element) A keyword targeting a specific part of an element (e.g. ::before, ::after, ::first-line, ::selection). - URL: https://peasycss.com/glossary/pseudo-element/ ### Relative Color Syntax (CSS Relative Color Syntax) A syntax for deriving new colors from existing ones by modifying individual channels (e.g. lighten, desaturate). - URL: https://peasycss.com/glossary/relative-color-syntax/ ### Scroll-Driven Animation (CSS Scroll-Driven Animation) Animations linked to scroll progress rather than time, enabling effects that respond to the user's scroll position. - URL: https://peasycss.com/glossary/scroll-driven-animation/ ### Scroll Snap (CSS Scroll Snap) Properties that control scroll position snapping, ensuring elements align to defined snap points after scrolling. - URL: https://peasycss.com/glossary/scroll-snap/ ### Selector Combinator (CSS Selector Combinator) Characters that define relationships between selectors: descendant (space), child (>), sibling (+, ~). - URL: https://peasycss.com/glossary/selector-combinator/ ### Specificity (CSS Specificity) The algorithm browsers use to determine which CSS rule takes precedence when multiple rules target the same element. - URL: https://peasycss.com/glossary/specificity/ ### Stacking Context (CSS Stacking Context) A three-dimensional conceptualization of HTML elements along the z-axis, created by specific CSS properties. - URL: https://peasycss.com/glossary/stacking-context/ ### Starting Style (CSS @starting-style Rule) A rule defining initial styles for elements transitioning from display:none, enabling entry animations. - URL: https://peasycss.com/glossary/starting-style/ ### Subgrid (CSS Subgrid) A Grid feature allowing child grids to inherit and align with the parent grid's track sizing for consistent layouts. - URL: https://peasycss.com/glossary/subgrid/ ### Text Wrap Balance (CSS text-wrap: balance) A text layout mode that distributes text evenly across lines to avoid orphaned short final lines in headings. - URL: https://peasycss.com/glossary/text-wrap-balance/ ### Transition (CSS Transition) A smooth animation between two property values triggered by a state change (e.g. hover). - URL: https://peasycss.com/glossary/transition/ ### Viewport Unit (CSS Viewport Unit) Length units relative to the browser viewport dimensions: vw, vh, vmin, vmax, dvh, svh. - URL: https://peasycss.com/glossary/viewport-unit/ ### View Transition (CSS View Transitions API) A browser API enabling animated transitions between DOM states or page navigations with cross-fade and morph effects. - URL: https://peasycss.com/glossary/view-transition/ ### Z-Index (CSS Z-Index) A property controlling the stacking order of overlapping positioned elements on the z-axis. - URL: https://peasycss.com/glossary/z-index/ ## 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/formats/{slug}/ | Format detail with history, pros/cons | | GET /api/v1/conversions/ | Format conversion guides | | GET /api/v1/glossary/ | Terminology with 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 by industry | | 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 ## 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 (with simple + technical explanations) - 645 educational guides (avg 1,308 words) - 302 real-world use cases