NudgeCSS Guide

Installing NudgeCSS

NudgeCSS is a Chrome extension. It takes about 30 seconds to install and requires no account or sign-up.

1. Click the Install Free button at the top of this page or go to the Chrome Web Store listing.
2. Click Add to Chrome on the store page.
3. When Chrome asks for permissions, click Add extension.
4. You will see the NudgeCSS icon appear in your Chrome toolbar. If you do not see it, click the puzzle piece icon in the toolbar and pin NudgeCSS.
5. Navigate to any website and click the NudgeCSS icon to open the editor panel.

Picking an Element

Once the NudgeCSS panel is open, you can select any element on the page using these methods:

When an element is selected, it shows a blue outline on the page and its properties load in the editor panel on the right.

Typography Controls

The Typography group lets you adjust all text-related properties on the selected element.

• Font Family: Choose from system fonts or common web fonts.
• Font Size: Adjust with a slider or type a value directly. Supports px, rem, and em units.
• Font Weight: From thin (100) to black (900). Only weights supported by the font will apply.
• Line Height: Controls the space between lines of text.
• Letter Spacing: Adjusts the space between individual characters.
• Text Color: Opens a color picker with hex input and opacity control.
• Text Transform: Toggle between normal, uppercase, lowercase, and capitalize.
• Text Align: Left, center, right, or justify.

Appearance Controls

The Appearance group controls the visual styling of the element box itself.

• Background Color: Set a solid background color with full opacity control.
• Opacity: Adjust the overall opacity of the element from 0 to 100%.
• Border Radius: Round the corners of the element. You can control all corners together or each one individually.
• Border: Set border width, style (solid, dashed, dotted), and color.
• Box Shadow: Add and adjust drop shadows with control over offset, blur, spread, and color.
• Visibility: Toggle the element's visibility without removing it from the layout.

Using the Layer Panel

The Layer Panel shows the elements inside your currently selected section. It is the fastest way to find and select nested elements that are difficult to click directly on the page.

Each layer is labeled by its element type: Text, Image, Button, or Div. Clicking a layer in the panel selects that element and loads it in the editor.

The Back to Layers button appears after you drill into a child element, letting you return to the parent layer view.

Exporting Your CSS

NudgeCSS does not edit your live site files directly. Instead, it generates the CSS that represents your changes, which you copy and paste into your site's stylesheet.

When you are ready to export, click the Export button in the panel. Two options are available in the free tier:

• Copy CSS Patch: Copies the CSS for your current element's changes. Paste this into your site's stylesheet or a <style> tag.
• Copy for Claude: Copies the element's CSS context formatted for use with an AI assistant. See the section below for details.

Pro users also have access to Download JSON, which exports all changes from the current session as a structured file.

Copy for Claude

Copy for Claude is a special export that packages the selected element's current styles and context into a prompt-ready format. When you paste it into Claude or another AI assistant, the AI has exactly what it needs to understand the element and suggest or apply further changes.

This is useful when you have made some visual changes with NudgeCSS and want the AI to take it further, or when you want to describe a change in plain language and have the AI write the exact CSS for you.

To use it:

1. Select the element you want to work on.
2. Click Export, then choose Copy for Claude.
3. Open Claude (or your preferred AI assistant) and paste the copied text.
4. Add your request in plain language, for example: "Make the heading larger and change the color to dark navy."

FAQ