Visual CSS Editor
Restyle any website by clicking on it. Change text, colours, fonts, spacing, layout and images, drag elements into place, and keep your edits for next time.
- 5 Press 5 in the popup
- Runs in your browser
- Opens in a panel on the page
A visual CSS editor that works on any website
Visual CSS Editor lets you change how a website looks by clicking on it, the way you would in a design app. Pick an element, and a panel shows its text, typography, colours, size, spacing, layout, borders and position as simple controls. Every change appears on the page the moment you make it. There are no Apply buttons and no code to write.
It is ideal for trying out design ideas on a live site, mocking up a client’s change request in minutes, or fixing the little things that annoy you on sites you use every day.
Everything in one panel
- Text: edit the words right on the page.
- Typography: font family, size, weight, line height, letter spacing, alignment, case, italic, underline and strikethrough.
- Colour: text and fill colours, including transparent.
- Size and spacing: width, height, margin and padding.
- Layout: display, direction, justify, align, wrap, gap and grid columns.
- Border and effects: border, thickness, corner radius, shadow and opacity.
- Image: swap any image for one from your computer and choose how it fits.
Drag elements into place
Switch on Move and drag any element across the page. Guides and snapping help you line it up, the arrow keys nudge it by a pixel (or ten with Shift), and the Position section shows exactly how far it moved. Back to its place returns it whenever you change your mind.
Undo anything, and see what changed
Every change is a step you can undo and redo with Ctrl+Z and Ctrl+Shift+Z. The history list shows what you changed, so you can jump back to any point. Duplicate or hide elements, copy one element’s style and paste it onto another, reset a single element, or reset the whole page in one click.
Keep your edits
Save your changes for this page or for the whole site. The next time you visit, DevToolkit puts them back automatically. Pause them to see the original site, or forget them when you are done. When you need to share the result, copy your changes as CSS or save the edited page as a PDF.
Who uses it
- Designers showing a client a change on their real site instead of a static mockup.
- Developers trying spacing and colour ideas before touching the code, then copying the CSS.
- Marketers previewing headline and button changes for a landing page test.
- Everyday users making a busy site easier to read, and keeping it that way.
Edits happen in your browser only. Other visitors never see them.
Tip: Hold Shift while pressing an arrow key to nudge a moved element by 10 pixels instead of one.
How to edit a website's design visually
-
Open the editor
Click Visual CSS Editor in DevToolkit (or press 5). A panel opens on the page.
-
Click and change
Click an element, then change its text, colours, spacing, layout or position. Changes show live.
-
Save or share
Save edits for the page or the whole site, copy them as CSS, or save the page as a PDF.
What you can do with the Visual CSS Editor
-
Live, no code
Every change appears on the page as you make it.
-
Full style controls
Typography, colour, size, spacing, layout, borders, shadows and images.
-
Drag to move
Move elements with snapping guides and pixel nudges.
-
Undo and history
Step back through every change, or reset one element or the whole page.
-
Saved per site
Your edits come back on your next visit, with pause and forget options.
-
Copy CSS or save a PDF
Copy your changes as CSS, or save the edited page as a PDF.
Visual CSS Editor questions
Is the Visual CSS Editor free?
It is part of DevToolkit Pro, a one-time payment from $25 with no subscription.
Do other people see my changes?
No. Edits are applied in your own browser only. The real website and its other visitors are not affected.
How do saved edits work?
Press Save and choose This page or Whole site. DevToolkit stores the changes in your browser and puts them back every time you open that page or site. You can pause or forget them at any time.
Can I get the CSS of my changes?
Yes. Copy your changes as CSS to add them to the site's stylesheet, or save the edited page as a PDF to share with a client.
Are there things it cannot save?
Duplicated elements, edits inside embedded components that hide their structure, very large images and text edits that change a page's structure stay in the current session only. The panel tells you when that happens.
Try Visual CSS Editor today
Install DevToolkit free, then unlock every Pro tool with one payment. No subscription.