1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <title>Pricing - Screen Ruler for Chrome</title> 7 <meta name="description" content="Screen Ruler pricing. Core measurement and inspection stay free forever, and Studio is a one-time purchase." /> 8 <link rel="canonical" href="https://www.screen-ruler.com/pricing/" /> 9 <meta property="og:url" content="https://www.screen-ruler.com/pricing/" /> 10 <meta property="og:title" content="Pricing - Screen Ruler for Chrome" /> 11 <meta property="og:description" content="Screen Ruler pricing. Core measurement and inspection stay free forever, and Studio is a one-time purchase." /> 12 <meta property="og:image" content="https://www.screen-ruler.com/images/og-image.png" /> 13 <meta property="og:type" content="website" /> 14 <meta name="twitter:card" content="summary_large_image" /> 15 <meta name="twitter:title" content="Pricing - Screen Ruler for Chrome" /> 16 <meta name="twitter:description" content="Screen Ruler pricing. Core measurement and inspection stay free forever, and Studio is a one-time purchase." /> 17 <meta name="twitter:image" content="https://www.screen-ruler.com/images/og-image.png" /> 18 <link rel="alternate" type="text/plain" href="/llms.txt" title="LLMs.txt" /> 19 <link href="/fonts/fonts.css" rel="stylesheet" /> 20 <link rel="stylesheet" href="/styles.css" /> 21
21<script src="/header.js" defer></script>
21 22
22<script src="/footer.js" defer></script>
22 23
23<script src="/dialog.js" defer></script>
23 24
24<script src="https://gumroad.com/js/gumroad.js" defer></script>
24 25
25<script src="script.js" defer></script>
25 26 <link rel="icon" type="image/x-icon" href="/icon.png" /> 27
27<script defer data-site="91664bb401f601c4ca" src="https://www.staats.ai/s.js"></script>
27 28
28<script> 29 var p = new URLSearchParams(location.search), t = p.get("theme"); 30 if (t === "light" || t === "dark") document.documentElement.classList.add("force-" + t); 31 if (p.has("lang") || t) document.documentElement.classList.add("pending-i18n"); 32 </script>
32 33 </head> 34 <body> 35 <header class="header fixed-top row gap-5"> 36 <a class="brand row gap-2 text-lead" href="/"> 37 <img src="/icon.png" alt="" width="24" height="24" /> 38 <span>Screen Ruler</span> 39 </a> 40 <nav class="row gap-4"> 41 <div class="nav-drop"> 42 <button class="link medium nav-drop-toggle" type="button" aria-haspopup="true" aria-expanded="false">Product<svg class="nav-drop-caret" viewBox="0 0 256 256" fill="currentColor" width="12" height="12" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></button> 43 <div class="nav-drop-panel"> 44 <div class="nav-drop-card"> 45 <a class="nav-drop-item" href="/docs/getting-started" data-label="Docs"><svg viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216
45Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"/></svg><span class="nav-drop-item-text"><span class="nav-drop-item-title">Docs</span><span class="nav-drop-item-desc">Setup and reference</span></span><svg class="nav-drop-item-chev" viewBox="0 0 256 256" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a> 46 <a class="nav-drop-item" href="/free-trial/" data-label="Free trial"><svg viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M208,80H96V56a32,32,0,0,1,32-32c15.37,0,29.2,11,32.16,25.59a8,8,0,0,0,15.68-3.18C171.32,24.15,151.2,8,128,8A48.05,48.05,0,0,0,80,56V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80Zm0,128H48V96H208V208Z"/></svg><span class="nav-drop-item-text"><span class="nav-drop-item-title">Free trial</span><span class="nav-drop-item-desc">Everything unlocked for 7 days</span></span><svg class="nav-drop-item-chev" viewBox="0 0 256 256" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a> 47 <a class="nav-drop-item" href="/changelog" data-label="Changelog"><svg viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z"/></svg><span class="nav-drop-item-text"><span class="nav-drop-item-title">Changelog</span><span class="nav-drop-item-desc">What shipped, dated</span></span><svg class="nav-drop-item-chev" viewBox="0 0 256 256" fill="currentColor" width="16" height="16" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a> 48 </div> 49 </div> 50 </div> 51 <a class="link medium" href="/pricing/">Pricing</a> 52 </nav> 53 <a class="button button-sm button-subtle push" href="https://chromewebstore.google.com/detail/jfbbgijjljfbolelfkopkhbfjajjampm" target="_blank" data-staats="install_click">Add to Chrome</a> 54 <button class="button button-sm button-subtle button-icon menu-toggle push" type="button" aria-label="Open menu" aria-expanded="false"><svg viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"/></svg></button> 55 </header> 56 57 <main> 58 <section class="section"> 59 <div class="container col items-center gap-6"> 60 <div class="measure col items-center text-center gap-4"> 61 <p class="offer" id="offer" hidden><span class="offer-text" id="offer-text"></span></p> 62 <h1 class="text-3xl" data-i18n="pricingTitle">Pricing</h1> 63 <p class="text-md muted" data-i18n="pricingSubtitle">Choose the right plan for you, whether you're a designer, QA or builder.</p> 64 </div> 65 <div class="pricing-block col items-center gap-5"> 66 <div class="pricing-cards"> 67 <div class="pricing-card" data-tier="inspect"> 68 <div class="pricing-card-header"> 69 <h2 class="pricing-card-name" data-i18n="tierPro">Inspect</h2> 70 <p class="pricing-card-tagline" data-i18n="tierTaglinePro">Perfect for design and QA</p> 71 </div> 72 <div class="price-row">
73 <span class="price"><span class="shimmer shimmer-price"></span></span> 74 </div> 75 <ul class="pricing-card-features-list"> 76 <li> 77 <svg class="pricing-card-feature-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg> 78 <span data-i18n="proFeat1">Unlock 20+ inspection tools</span> 79 </li> 80 <li> 81 <svg class="pricing-card-feature-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg> 82 <span data-i18n="proFeat2">Use on 3 devices</span> 83 </li> 84 <li> 85 <svg class="pricing-card-feature-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg> 86 <span data-i18n="proFeat3">Free updates forever</span> 87 </li> 88 <li> 89 <svg class="pricing-card-feature-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg> 90 <span data-i18n="proFeat4">30-day money-back guarantee</span> 91 </li> 92 </ul> 93 <a class="button button-lg button-outline pricing-card-cta" href="https://mrviolets.gumroad.com/l/screen-ruler?variant=Inspect&wanted=true" target="_blank" rel="noopener" data-staats="buy_inspect_click"> 94 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z" /></svg> 95 <span data-i18n="ctaGetInspect">Get Inspect</span> 96 </a> 97 </div> 98 <div class="pricing-card recommended" data-tier="studio"> 99 <div class="pricing-card-header"> 100 <h2 class="pricing-card-name" data-i18n="tierStudio">Studio</h2> 101 <p class="pricing-card-tagline" data-i18n="tierTaglineStudio">Perfect for development and building</p> 102 </div> 103 <div class="price-row"> 104 <span class="price"><span class="shimmer shimmer-price"></span></span> 105 </div> 106 <ul class="pricing-card-features-list"> 107 <li> 108 <svg class="pricing-card-feature-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg>
109 <span data-i18n="studioFeat1">Everything in Inspect</span> 110 </li> 111 <li> 112 <svg class="pricing-card-feature-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg> 113 <span data-i18n="studioFeat2">Live CSS, HTML, and text editing</span> 114 </li> 115 <li> 116 <svg class="pricing-card-feature-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg> 117 <span data-i18n="studioFeat3">Edit states, pseudos, and breakpoints</span> 118 </li> 119 <li> 120 <svg class="pricing-card-feature-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg> 121 <span data-i18n="studioFeat4">Per-element change tracking with diff</span> 122 </li> 123 <li> 124 <svg class="pricing-card-feature-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg> 125 <span data-i18n="studioFeat5">MCP server for AI coding agents</span> 126 </li> 127 </ul> 128 <a class="button button-lg button-outline pricing-card-cta" href="https://mrviolets.gumroad.com/l/screen-ruler?variant=Studio&wanted=true" target="_blank" rel="noopener" data-staats="buy_studio_click"> 129 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z" /></svg> 130 <span data-i18n="ctaGetStudio">Get Studio</span> 131 </a> 132 </div> 133 </div> 134 <p class="footnote text-sm muted text-center"><span data-i18n="footnote">Free 7-day Studio trial, no card required · Regional pricing available</span><span id="footnote-license-wrap" hidden> · <a class="link underline" href="#" id="footnote-license-link" data-i18n="footerLicenseLink">Already have a license?</a></span></p> 135 </div> 136 </div> 137 </section> 138 <section class="section"> 139 <div class="container"> 140 <figure class="measure col items-center text-center gap-5"> 141 <blockquote class="quote text-xl medium">Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.</blockquote> 142 <figcaption class="col items-center gap-3"> 143 <div class="row gap-1 accent" role="img" aria-label="Rated 5 out of 5"> 144 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 145 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 146 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 147 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 148 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 149 </div>
150 <span class="muted">Manuel Avella-Salazar - Chrome Web Store Review</span> 151 </figcaption> 152 </figure> 153 </div> 154 </section> 155 <section class="section" id="compare"> 156 <div class="container col items-center gap-8"> 157 <h2 class="text-2xl text-center" data-i18n="comparisonTitle">Compare plans & features</h2> 158 <div class="comparison-table-wrap"> 159 <table class="comparison-table"> 160 <colgroup> 161 <col /> 162 <col class="col-tier" /> 163 <col class="col-tier" /> 164 </colgroup> 165 <thead> 166 <tr> 167 <th class="feature-col"></th> 168 <th class="tier-col" data-tier="inspect"> 169 <div class="col items-center gap-2"> 170 <span class="tier-name" data-i18n="colPro">Inspect</span> 171 <span class="text-md"><span class="medium tier-price"><span class="shimmer shimmer-price-sm"></span></span></span> 172 <a class="button button-sm button-outline" href="https://mrviolets.gumroad.com/l/screen-ruler?variant=Inspect&wanted=true" target="_blank" rel="noopener" data-staats="buy_inspect_click"><span data-i18n="ctaGetInspect">Get Inspect</span></a> 173 </div> 174 </th> 175 <th class="tier-col" data-tier="studio"> 176 <div class="col items-center gap-2"> 177 <span class="tier-name tier-name-pro" data-i18n="colStudio">Studio</span> 178 <span class="text-md"><span class="medium tier-price"><span class="shimmer shimmer-price-sm"></span></span></span> 179 <a class="button button-sm button-accent" href="https://mrviolets.gumroad.com/l/screen-ruler?variant=Studio&wanted=true" target="_blank" rel="noopener" data-staats="buy_studio_click"><span data-i18n="ctaGetStudio">Get Studio</span></a> 180 </div> 181 </th> 182 </tr> 183 </thead> 184 <tbody> 185 <tr><td data-i18n="feLiveCss">Edit CSS Live</td><td><span class="sr-only">Not included</span></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 186 <tr><td data-i18n="feHtml">Cut, Copy, Paste and Manipulate HTML</td><td><span class="sr-only">Not included</span></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 187 <tr><td data-i18n="feText">Edit Page Text</td><td><span class="sr-only">Not included</span></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 188 <tr><td data-i18n="feClasses">Edit Tailwind Classes</td><td><span class="sr-only">Not included</span></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 189 <tr><td data-i18n="fePseudo">Edit States & Breakpoints</td><td>
189<span class="sr-only">Not included</span></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 190 <tr><td data-i18n="feChangeTracking">Per-Element Change Tracking with Diff</td><td><span class="sr-only">Not included</span></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 191 <tr><td data-i18n="feSavedEdits">Save Edits per Site</td><td><span class="sr-only">Not included</span></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 192 <tr><td data-i18n="feMcpServer">MCP Server</td><td><span class="sr-only">Not included</span></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 193 <tr><td data-i18n="feInspector">Floating Inspector</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 194 <tr><td data-i18n="feLayout">Visualize Layout</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 195 <tr><td data-i18n="feColor">Extract Colors</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 196 <tr><td data-i18n="feTypography">Analyze Typography</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td>
196<span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 197 <tr><td data-i18n="feGradient">Inspect Gradients</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 198 <tr><td data-i18n="feBoxShadow">Visualize Box Shadows</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 199 <tr><td data-i18n="feAnimation">Analyze Animations</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 200 <tr><td data-i18n="feTransition">Inspect Transitions</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 201 <tr><td data-i18n="feCssRules">Browse CSS Rules</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 202 <tr><td data-i18n="feSelector">Search by Selector</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td>
202<span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 203 <tr><td data-i18n="feTailwind">Generate Tailwind Classes</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 204 <tr><td data-i18n="feGrid">
204Overlay Layout Grid</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 205 <tr><td data-i18n="feXray">X-Ray Mode</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 206 <tr><td data-i18n="feResponsive">Preview Responsive Sizes</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 207 <tr><td data-i18n="feBreakpoints">Detect Breakpoints</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 208 <tr><td data-i18n="feAsset">Extract Assets</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 209 <tr><td data-i18n="feCanvas">Inspect Canvas</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 210 <tr><td data-i18n="feTechDetection">Detect Technologies</td><td>
210<span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 211 <tr><td data-i18n="fePageWeight">Measure Page Weight</td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td><td><span class="sr-only">Included</span><svg class="comparison-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"/></svg></td></tr> 212 </tbody> 213 </table> 214 <div class="table-cap" aria-hidden="true"><span></span></div> 215 </div> 216 </div> 217 </section> 218 <section class="section"> 219 <div class="container col items-center gap-8"> 220 <div class="col items-center gap-3 text-center"> 221 <h2 class="text-2xl" data-i18n="quotesTitle">Loved by designers and developers</h2> 222 </div> 223 <div class="quote-grid"> 224 <figure class="quote-card"> 225 <blockquote class="quote">Having gone through a few dozen plugins, this is worth every $. Also Mr. Violets is incredibly responsive - that alone is worth the price.</blockquote> 226 <div class="row gap-1 accent" role="img" aria-label="Rated 5 out of 5"> 227 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 228 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 229 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 230 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 231 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 232 </div>
233 <figcaption class="quote-card-caption col"> 234 <span class="medium">Arti Villa</span> 235 <span class="row items-center gap-2 muted text-sm"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" aria-hidden="true"><path fill="none" d="M-6-6h524v524H-6z"/><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws1_a"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws1_a)"><path fill="#eee" fill-rule="nonzero" d="M8 20h176v152H8z"/></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws1_b"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws1_b)"><path d="M116 36H76c-4.42 0-8 3.58-8 8s3.58 8 8 8h40c4.42 0 8-3.58 8-8s-3.58-8-8-8z" fill="#fff" fill-rule="nonzero"/></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws1_c"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws1_c)"><clipPath id="cws1_d"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws1_d)"><path d="M32.07 84v93.27h34.01L96 125.45h76V84H32.07zm0 0v93.27h34.01L96 125.45h76V84H32.07z" fill="#db4437" fill-rule="nonzero"/></g><clipPath id="cws1_e"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws1_e)"><path d="M20 236h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24V236zm0 0h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24V236z" fill="#0f9d58" fill-rule="nonzero"/></g><clipPath id="cws1_f"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws1_f)"><path d="M96 125.45l29.92 51.82L92.35 236H172V125.45H96zm0 0l29.92 51.82L92.35 236H172V125.45H96z" fill="#ffcd40" fill-rule="nonzero"/></g><clipPath id="cws1_g"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws1_g)"><circle cx="96" cy="160" r="34.55" fill="#f1f1f1"/><circle cx="96" cy="160" r="27.64" fill="#4285f4"/></g></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws1_h"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws1_h)"><path fill="#212121" fill-opacity=".05" fill-rule="nonzero" d="M8 20h176v76H8z"/></g></g><path fill="#212121" fill-opacity=".02" fill-rule="nonzero" d="M15.833 253.27h480.333V256H15.833z"/><path fill="#fff" fill-opacity=".05" fill-rule="nonzero" d="M15.833 256h480.333v2.729H15.833z"/><path d="M310.583 135.916H201.416c-11.599 0-21.07-9.06-21.751-20.469-.055.464-.082.9-.082 1.365 0 12.063 9.77 21.833 21.833 21.833h109.167c12.063 0 21.833-9.77 21.833-21.833 0-.464-.027-.9-.082-1.365-.682 11.408-10.152 20.469-21.751 20.469zM15.833 48.583v2.729h480.333v-2.73H15.833z" fill="#212121" fill-opacity=".02" fill-rule="nonzero"/><path d="M201.416 92.25h109.167c11.599 0 21.069 9.06 21.751 20.468.027-.464.082-.9.082-1.364 0-12.063-9.77-21.834-21.833-21.834H201.416c-12.063 0-21.833 9.77-21.833 21.834 0 .463.027.9.082 1.364.682-11.408 10.152-20.469 21.751-20.469zm262 368.437H48.583c-18.013 0-32.75-14.738-32.75-32.75v2.729c0 18.013 14.737 32.75 32.75 32.75h414.833c18.012 0 32.75-14.737 32.75-32.75v-2.73c0 18.013-14.738 32.75-32.75 32.75z" fill="#231f20" fill-opacity=".1" fill-rule="nonzero"/><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z" fill="url(#cws1r)" fill-rule="nonzero" transform="matrix(2.72917 0 0 2.72917 -6 -6)"/><defs><radialGradient id="cws1r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.502 19.344) scale(227.596)"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs></svg>Chrome Web Store review</span> 236 </figcaption> 237 </figure> 238 <figure class="quote-card"> 239 <blockquote class="quote">This tool has replaced several browser extensions I used as a web designer, making my workflow much simpler.</blockquote> 240 <div class="row gap-1 accent" role="img" aria-label="Rated 5 out of 5"> 241 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 242 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 243 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 244 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 245 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 246 </div>
247 <figcaption class="quote-card-caption col"> 248 <span class="medium">Victor Chinedu</span> 249 <span class="row items-center gap-2 muted text-sm"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" aria-hidden="true"><g fill-rule="nonzero"><path d="M256 505.999c138.069 0 249.999-111.93 249.999-250s-111.93-250-250-250S6 117.93 6 256s111.93 250 250 250z" fill="#ff90e8"/><path d="M234.3 381.989c-73.23 0-116.31-58.735-116.31-131.8 0-75.925 47.39-137.53 137.85-137.53 93.334 0 124.924 63.035 126.359 98.85h-67.485c-1.435-20.055-18.67-50.14-60.31-50.14-44.515 0-73.235 38.68-73.235 85.955s28.72 85.96 73.235 85.96c40.205 0 57.44-31.52 64.615-63.04h-64.615V244.46h135.59v131.805h-59.485v-83.095c-4.31 30.085-22.975 88.82-96.21 88.82z"/></g></svg>Gumroad review</span> 250 </figcaption> 251 </figure> 252 <figure class="quote-card"> 253 <blockquote class="quote">Just hands down the best tool in my toolbox as a developer. It's more than just a simple ruler, and helps me out everyday just about.</blockquote> 254 <div class="row gap-1 accent" role="img" aria-label="Rated 4 out of 5"> 255 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 256 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 257 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 258 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 259 </div> 260 <figcaption class="quote-card-caption col"> 261 <span class="medium">Austin Spraggins</span> 262 <span class="row items-center gap-2 muted text-sm"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" aria-hidden="true"><path fill="none" d="M-6-6h524v524H-6z"/><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws2_a"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws2_a)"><path fill="#eee" fill-rule="nonzero" d="M8 20h176v152H8z"/></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws2_b"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws2_b)"><path d="M116 36H76c-4.42 0-8 3.58-8 8s3.58 8 8 8h40c4.42 0 8-3.58 8-8s-3.58-8-8-8z" fill="#fff" fill-rule="nonzero"/></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws2_c"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws2_c)"><clipPath id="cws2_d"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws2_d)"><path d="M32.07 84v93.27h34.01L96 125.45h76V84H32.07zm0 0v93.27h34.01L96 125.45h76V84H32.07z" fill="#db4437" fill-rule="nonzero"/></g><clipPath id="cws2_e"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws2_e)"><path d="M20 236h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24V236zm0 0h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24V236z" fill="#0f9d58" fill-rule="nonzero"/></g><clipPath id="cws2_f"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws2_f)"><path d="M96 125.45l29.92 51.82L92.35 236H172V125.45H96zm0 0l29.92 51.82L92.35 236H172V125.45H96z" fill="#ffcd40" fill-rule="nonzero"/></g><clipPath id="cws2_g"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws2_g)"><circle cx="96" cy="160" r="34.55" fill="#f1f1f1"/><circle cx="96" cy="160" r="27.64" fill="#4285f4"/></g></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws2_h"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws2_h)"><path fill="#212121" fill-opacity=".05" fill-rule="nonzero" d="M8 20h176v76H8z"/></g></g><path fill="#212121" fill-opacity=".02" fill-rule="nonzero" d="M15.833 253.27h480.333V256H15.833z"/><path fill="#fff" fill-opacity=".05" fill-rule="nonzero" d="M15.833 256h480.333v2.729H15.833z"/><path d="M310.583 135.916H201.416c-11.599 0-21.07-9.06-21.751-20.469-.055.464-.082.9-.082 1.365 0 12.063 9.77 21.833 21.833 21.833h109.167c12.063 0 21.833-9.77 21.833-21.833 0-.464-.027-.9-.082-1.365-.682 11.408
262-10.152 20.469-21.751 20.469zM15.833 48.583v2.729h480.333v-2.73H15.833z" fill="#212121" fill-opacity=".02" fill-rule="nonzero"/><path d="M201.416 92.25h109.167c11.599 0 21.069 9.06 21.751 20.468.027-.464.082-.9.082-1.364 0-12.063-9.77-21.834-21.833-21.834H201.416c-12.063 0-21.833 9.77-21.833 21.834 0 .463.027.9.082 1.364.682-11.408 10.152-20.469 21.751-20.469zm262 368.437H48.583c-18.013 0-32.75-14.738-32.75-32.75v2.729c0 18.013 14.737 32.75 32.75 32.75h414.833c18.012 0 32.75-14.737 32.75-32.75v-2.73c0 18.013-14.738 32.75-32.75 32.75z" fill="#231f20" fill-opacity=".1" fill-rule="nonzero"/><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z" fill="url(#cws2r)" fill-rule="nonzero" transform="matrix(2.72917 0 0 2.72917 -6 -6)"/><defs><radialGradient id="cws2r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.502 19.344) scale(227.596)"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs></svg>Chrome Web Store review</span> 263 </figcaption> 264 </figure> 265 <figure class="quote-card"> 266 <blockquote class="quote">Yes, this is a nice tool that speeds up the webbuilding process! Great price!</blockquote> 267 <div class="row gap-1 accent" role="img" aria-label="Rated 5 out of 5"> 268 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 269 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 270 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 271 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 272 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 273 </div> 274 <figcaption class="quote-card-caption col"> 275 <span class="medium">Leon Eekhout</span> 276 <span class="row items-center gap-2 muted text-sm"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" aria-hidden="true"><g fill-rule="nonzero"><path d="M256 505.999c138.069 0 249.999-111.93 249.999-250s-111.93-250-250-250S6 117.93 6 256s111.93 250 250 250z" fill="#ff90e8"/><path d="M234.3 381.989c-73.23 0-116.31-58.735-116.31-131.8 0-75.925 47.39-137.53 137.85-137.53 93.334 0 124.924 63.035 126.359 98.85
276h-67.485c-1.435-20.055-18.67-50.14-60.31-50.14-44.515 0-73.235 38.68-73.235 85.955s28.72 85.96 73.235 85.96c40.205 0 57.44-31.52 64.615-63.04h-64.615V244.46h135.59v131.805h-59.485v-83.095c-4.31 30.085-22.975 88.82-96.21 88.82z"/></g></svg>Gumroad review</span> 277 </figcaption> 278 </figure> 279 <figure class="quote-card"> 280 <blockquote class="quote">A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler.. An invaluable piece of my workflow when designing sites.</blockquote> 281 <div class="row gap-1 accent" role="img" aria-label="Rated 5 out of 5"> 282 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 283 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 284 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 285 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 286 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 287 </div> 288 <figcaption class="quote-card-caption col"> 289 <span class="medium">Richard Brus</span> 290 <span class="row items-center gap-2 muted text-sm"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" aria-hidden="true"><path fill="none" d="M-6-6h524v524H-6z"/><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws3_a"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws3_a)"><path fill="#eee" fill-rule="nonzero" d="M8 20h176v152H8z"/></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws3_b"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws3_b)"><path d="M116 36H76c-4.42 0-8 3.58-8 8s3.58 8 8 8h40c4.42 0 8-3.58 8-8s-3.58-8-8-8z" fill="#fff" fill-rule="nonzero"/></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws3_c"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws3_c)"><clipPath id="cws3_d"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws3_d)"><path d="M32.07 84v93.27h34.01L96 125.45h76V84H32.07zm0 0v93.27h34.01L96 125.45h76V84H32.07z" fill="#db4437" fill-rule="nonzero"/></g><clipPath id="cws3_e"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws3_e)"><path d="M20 236h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24V236zm0 0h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24V236z" fill="#0f9d58" fill-rule="nonzero"/></g><clipPath id="cws3_f"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws3_f)"><path d="M96 125.45l29.92 51.82L92.35 236H172V125.45H96zm0 0l29.92 51.82L92.35 236H172V125.45H96z" fill="#ffcd40" fill-rule="nonzero"/></g><clipPath id="cws3_g"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws3_g)"><circle cx="96" cy="160" r="34.55" fill="#f1f1f1"/><circle cx="96" cy="160" r="27.64" fill="#4285f4"/></g></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws3_h"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws3_h)"><path fill="#212121" fill-opacity=".05" fill-rule="nonzero" d="M8 20h176v76H8z"/></g></g><path fill="#212121" fill-opacity=".02" fill-rule="nonzero" d="M15.833 253.27h480.333V256H15.833z"/><path fill="#fff" fill-opacity=".05" fill-rule="nonzero" d="M15.833 256h480.333v2.729H15.833z"/><path d="M310.583 135.916H201.416c-11.599 0-21.07-9.06-21.751-20.469-.055.464-.082.9-.082 1.365 0 12.063 9.77 21.833 21.833 21.833h109.167c12.063 0 21.833-9.77 21.833-21.833 0-.464-.027-.9-.082-1.365-.682 11.408
290-10.152 20.469-21.751 20.469zM15.833 48.583v2.729h480.333v-2.73H15.833z" fill="#212121" fill-opacity=".02" fill-rule="nonzero"/><path d="M201.416 92.25h109.167c11.599 0 21.069 9.06 21.751 20.468.027-.464.082-.9.082-1.364 0-12.063-9.77-21.834-21.833-21.834H201.416c-12.063 0-21.833 9.77-21.833 21.834 0 .463.027.9.082 1.364.682-11.408 10.152-20.469 21.751-20.469zm262 368.437H48.583c-18.013 0-32.75-14.738-32.75-32.75v2.729c0 18.013 14.737 32.75 32.75 32.75h414.833c18.012 0 32.75-14.737 32.75-32.75v-2.73c0 18.013-14.738 32.75-32.75 32.75z" fill="#231f20" fill-opacity=".1" fill-rule="nonzero"/><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z" fill="url(#cws3r)" fill-rule="nonzero" transform="matrix(2.72917 0 0 2.72917 -6 -6)"/><defs><radialGradient id="cws3r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.502 19.344) scale(227.596)"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs></svg>Chrome Web Store review</span> 291 </figcaption> 292 </figure> 293 <figure class="quote-card"> 294 <blockquote class="quote">This extension is incredible</blockquote> 295 <div class="row gap-1 accent" role="img" aria-label="Rated 5 out of 5"> 296 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 297 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 298 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 299 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 300 <svg class="star" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z" /></svg> 301 </div> 302 <figcaption class="quote-card-caption col"> 303 <span class="medium">Dave Mejias</span> 304 <span class="row items-center gap-2 muted text-sm"><svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" aria-hidden="true"><path fill="none" d="M-6-6h524v524H-6z"/><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws4_a"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws4_a)"><path fill="#eee" fill-rule="nonzero" d="M8 20h176v152H8z"/></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws4_b"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws4_b)">
304<path d="M116 36H76c-4.42 0-8 3.58-8 8s3.58 8 8 8h40c4.42 0 8-3.58 8-8s-3.58-8-8-8z" fill="#fff" fill-rule="nonzero"/></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws4_c"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws4_c)"><clipPath id="cws4_d"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws4_d)"><path d="M32.07 84v93.27h34.01L96 125.45h76V84H32.07zm0 0v93.27h34.01L96 125.45h76V84H32.07z" fill="#db4437" fill-rule="nonzero"/></g><clipPath id="cws4_e"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws4_e)"><path d="M20 236h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24V236zm0 0h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24V236z" fill="#0f9d58" fill-rule="nonzero"/></g><clipPath id="cws4_f"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws4_f)"><path d="M96 125.45l29.92 51.82L92.35 236H172V125.45H96zm0 0l29.92 51.82L92.35 236H172V125.45H96z" fill="#ffcd40" fill-rule="nonzero"/></g><clipPath id="cws4_g"><circle cx="96" cy="160" r="76"/></clipPath><g clip-path="url(#cws4_g)"><circle cx="96" cy="160" r="34.55" fill="#f1f1f1"/><circle cx="96" cy="160" r="27.64" fill="#4285f4"/></g></g></g><g transform="matrix(2.72917 0 0 2.72917 -6 -6)"><clipPath id="cws4_h"><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z"/></clipPath><g clip-path="url(#cws4_h)"><path fill="#212121" fill-opacity=".05" fill-rule="nonzero" d="M8 20h176v76H8z"/></g></g><path fill="#212121" fill-opacity=".02" fill-rule="nonzero" d="M15.833 253.27h480.333V256H15.833z"/><path fill="#fff" fill-opacity=".05" fill-rule="nonzero" d="M15.833 256h480.333v2.729H15.833z"/><path d="M310.583 135.916H201.416c-11.599 0-21.07-9.06-21.751-20.469-.055.464-.082.9-.082 1.365 0 12.063 9.77 21.833 21.833 21.833h109.167c12.063 0 21.833-9.77 21.833-21.833 0-.464-.027-.9-.082-1.365-.682 11.408-10.152 20.469-21.751 20.469zM15.833 48.583v2.729h480.333v-2.73H15.833z" fill="#212121" fill-opacity=".02" fill-rule="nonzero"/><path d="M201.416 92.25h109.167c11.599 0 21.069 9.06 21.751 20.468.027-.464.082-.9.082-1.364 0-12.063-9.77-21.834-21.833-21.834H201.416c-12.063 0-21.833 9.77-21.833 21.834 0 .463.027.9.082 1.364.682-11.408 10.152-20.469 21.751-20.469zm262 368.437H48.583c-18.013 0-32.75-14.738-32.75-32.75v2.729c0 18.013 14.737 32.75 32.75 32.75h414.833c18.012 0 32.75-14.737 32.75-32.75v-2.73c0 18.013-14.738 32.75-32.75 32.75z" fill="#231f20" fill-opacity=".1" fill-rule="nonzero"/><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z" fill="url(#cws4r)" fill-rule="nonzero" transform="matrix(2.72917 0 0 2.72917 -6 -6)"/><defs><radialGradient id="cws4r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.502 19.344) scale(227.596)"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs></svg>Chrome Web Store review</span> 305 </figcaption> 306 </figure> 307 </div> 308 </div> 309 </section> 310 <section class="section" id="faq"> 311 <div class="container col items-center gap-8"> 312 <h2 class="text-2xl text-center" data-i18n="faqTitle">FAQ</h2> 313 <div class="faq-list"> 314 <details class="faq-item"> 315 <summary> 316 <span data-i18n="faqFreeQ">Can I use Screen Ruler for free?</span> 317 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20" fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="208 96 128 176 48 96"/></svg> 318 </summary> 319 <p data-i18n="faqFreeA">Yes. Screen Ruler is free to use, forever. Upgrade to Pro for advanced features like layout visualization, color extraction, animation inspection, and live editing.</p> 320 </details> 321 <details class="faq-item"> 322 <summary>
323 <span data-i18n="faqTrialQ">How does the free trial work?</span> 324 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20" fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="208 96 128 176 48 96"/></svg> 325 </summary> 326 <p data-i18n="faqTrialA">You get a free 7-day Studio trial with no card required. When the trial ends, the extension reverts to the free tier. No auto-charge, no surprise. Upgrade any time to keep Studio features.</p> 327 </details> 328 <details class="faq-item"> 329 <summary> 330 <span data-i18n="faqPaymentQ">Is this a one-time purchase or a subscription?</span> 331 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20" fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="208 96 128 176 48 96"/></svg> 332 </summary> 333 <p data-i18n="faqPaymentA">One-time. Pay once, use it forever. No subscription, no auto-renew.</p> 334 </details> 335 <details class="faq-item"> 336 <summary> 337 <span data-i18n="faqDevicesQ">Can I use my license on multiple computers?</span> 338 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20" fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="208 96 128 176 48 96"/></svg> 339 </summary> 340 <p data-i18n="faqDevicesA">Yes. Each license is good for 3 activations, so you can use Pro across your work and personal computers.</p> 341 </details> 342 <details class="faq-item"> 343 <summary> 344 <span data-i18n="faqLostKeyQ">What if I lose my license key?</span> 345 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20" fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="208 96 128 176 48 96"/></svg> 346 </summary> 347 <p data-i18n="faqLostKeyA">Sign in to <a href="https://gumroad.com" target="_blank" rel="noopener">gumroad.com</a> with the email you bought with to retrieve your key, or email <a href="mailto:[email protected]">[email protected]</a> for help.</p> 348 </details> 349 <details class="faq-item"> 350 <summary> 351 <span data-i18n="faqSecureQ">How secure is the payment?</span> 352 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20" fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="208 96 128 176 48 96"/></svg> 353 </summary> 354 <p data-i18n="faqSecureA">All payments are processed by Gumroad. Your card and billing details are stored on Gumroad’s servers; Screen Ruler never sees them.</p> 355 </details> 356 <details class="faq-item"> 357 <summary> 358 <span data-i18n="faqRefundQ">What if I change my mind?</span> 359 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20" fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
359<polyline points="208 96 128 176 48 96"/></svg> 360 </summary> 361 <p data-i18n="faqRefundA">A 30-day money-back guarantee is included. Email <a href="mailto:[email protected]">[email protected]</a> within 30 days for a full refund.</p> 362 </details> 363 <details class="faq-item"> 364 <summary> 365 <span data-i18n="faqContactQ">How can I contact support?</span> 366 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="20" height="20" fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="208 96 128 176 48 96"/></svg> 367 </summary> 368 <p data-i18n="faqContactA">For any billing, licensing, or product question, email <a href="mailto:[email protected]">[email protected]</a>.</p> 369 </details> 370 </div> 371 </div> 372 </section> 373 </main> 374 375 <footer> 376 <div class="container footer-grid"> 377 <div class="footer-brand col gap-3"> 378 <span class="brand row gap-2 text-lead"> 379 <img src="/icon.png" alt="" width="24" height="24" /> 380 <span>Screen Ruler</span> 381 </span> 382 <span class="text-sm muted">© <span data-year>2026</span> Screen Ruler</span> 383 <span class="ph-badge"> 384 <a href="https://www.producthunt.com/products/screen-ruler/launches/screen-ruler-3?embed=true&utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_campaign=badge-screen-ruler-3" target="_blank" rel="noopener noreferrer"><img alt="Screen Ruler - The go-to ruler for designers and developers | Product Hunt" width="250" height="54" src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=1153904&theme=light&period=weekly&topic_id=44&t=1789286808614"></a> 385 </span> 386 </div> 387 <nav class="col gap-1"> 388 <p class="semibold">Product</p> 389 <a class="link" href="https://chromewebstore.google.com/detail/jfbbgijjljfbolelfkopkhbfjajjampm" target="_blank" data-staats="install_click">Add to Chrome</a> 390 <a class="link" href="/pricing/" data-staats="pricing_click">Pricing</a> 391 <a class="link" href="/free-trial/" data-staats="trial_click">Free Trial</a> 392 <a class="link" href="/docs/getting-started">Documentation</a> 393 <a class="link" href="/changelog">Changelog</a> 394 </nav> 395 <nav class="col gap-1"> 396 <p class="semibold">Guides</p> 397 <a class="link" href="/how-to/find-website-font">Find a Font</a> 398 <a class="link" href="/how-to/measure-distance-between-elements">Measure Distances</a> 399 <a class="link" href="/how-to/copy-css-from-website">Copy CSS</a> 400 <a class="link" href="/how-to/extract-color-palette">Extract Colors</a> 401 <a class="link" href="/how-to/check-page-weight">Check Page Weight</a> 402 <a class="link" href="/how-to/preview-social-share">Preview Social Cards</a> 403 </nav> 404 <nav class="col gap-1"> 405 <p class="semibold">Best Extensions</p> 406 <a class="link" href="/best/css-inspector-chrome-extensions">CSS Inspector</a> 407 <a class="link" href="/best/pixel-ruler-chrome-extensions">Pixel Ruler</a> 408 <a class="link" href="/best/color-picker-chrome-extensions">Color Picker</a> 409 <a class="link" href="/best/responsive-design-testing-chrome-extensions">Responsive Testing</a> 410 <a class="link" href="/best/font-inspector-chrome-extensions">Font Inspector</a> 411 <a class="link" href="/best/edit-live-web-page-chrome-extensions">Live Page Editing</a> 412 <a class="link" href="/best/svg-downloader-chrome-extensions">SVG Downloader</a> 413 <a class="link" href="/best/visbug-alternatives-chrome-extensions">VisBug Alternatives</a> 414 </nav> 415 <nav class="col gap-1"> 416 <p class="semibold">Support</p> 417 <a class="link" href="mailto:[email protected]">Contact</a> 418 <a class="link" href="/privacy-policy">Privacy Policy</a> 419 <a class="link" href="/terms">Terms</a> 420 <a class="link" href="/downloads/screen-ruler-press-kit.zip">Press Kit</a> 421 <a class="link" href="#" id="footer-license-link" data-i18n="footerLicenseLink" hidden>Already have a license?</a> 422 </nav> 423 </div> 424 </footer> 425 <dialog id="license-dialog" class="dialog-container"> 426 <div class="dialog-content"> 427 <h3 class="dialog-title" id="dialog-title"></h3> 428 <p class="dialog-message" id="dialog-message"></p> 429 <form id="license-form" method="dialog" class="dialog-form"> 430 <input type="text" id="license-key-input" class="dialog-input" autocomplete="off" required /> 431 <div class="dialog-actions"> 432 <button type="button" id="dialog-cancel-button" class="button-tiny text-button"></button> 433 <button type="submit" id="dialog-submit-button" class="button-tiny primary-button"></button> 434 </div> 435 </form> 436 </div> 437 </dialog> 438 439 </body> 440</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.