How to Remove Grey Background from ChatGPT Text Without Losing Formatting

September 6, 2023

When you copy text from ChatGPT and paste it into Gmail or Google Docs, you may notice that the text retains a grey background, which may be undesirable for several reasons. Not only does the grey background look out of place, but it can also be a telltale sign that the text was generated by ChatGPT. If you’re using this text in a professional setting or in a context where you don’t want it to be obvious that the text was machine-generated, you’d likely prefer to remove this background.

The grey background comes along because the copying process retains some of the HTML and CSS formatting from the web page where you copied the text. In particular, it copies the CSS style that gives ChatGPT’s output its distinctive look.

Ways to Retain Formatting but Remove the Grey Background:

Option 1: Using Google Docs (Best Choice)

Google Docs serves as a definitive solution to the problem of retaining text formatting while removing the grey background when you copy text from ChatGPT. Not only can Google Docs be your final destination for the text, but it can also act as an effective intermediate rich text editor before you move the text to another platform like Gmail.

Here’s how you can use Google Docs to accomplish this:

Open a Google Docs Document: Start by opening a new or existing Google Docs document where you’ll paste your ChatGPT-generated text.
Set Preferences for Markdown: Before pasting, go to Tools in the menu bar and select Preferences. In the preferences dialog, check the option that says “Automatically detect markdown”. This will help Google Docs to better interpret the formatting elements like bullet lists, hyperlinks, and headers.
Paste the ChatGPT Text: Now, paste your copied ChatGPT text into the Google Docs document.
Remove Grey Background:
- Highlight the pasted text that has the grey background.
- Go to Format in the menu bar.
- Select Paragraph styles.
- Choose Borders and Shading.
- In the dialog that pops up, press “Reset” and then “Apply”.

This will remove the grey background while keeping other text formats like bold, italics, and hyperlinks intact. Once you’ve done this, your text is clean and free from the ChatGPT-specific grey background. You can now either keep the text in Google Docs or copy it to another application without worrying about the grey background tagging along.

By using Google Docs as an intermediate or final text editor, you can ensure that your ChatGPT-generated text blends seamlessly with other content, without giving away its machine-generated origins.

Option 2: Removing Grey Background from ChatGPT Text Before Copying

Step 1: Open Developer Tools

Windows/Linux: Right-click on the ChatGPT text that you want to copy and choose “Inspect” from the context menu.
Mac: Control-click on the ChatGPT text and choose “Inspect” from the context menu.

You can also open Developer Tools from your browser’s menu or use keyboard shortcuts (F12 or Ctrl+Shift+I on Windows/Linux, Cmd+Opt+I on Mac).

Step 2: Locate the Relevant HTML Element

The Developer Tools panel will open, usually at the bottom or side of your browser window. Here, you’ll see the HTML and CSS that make up the web page.
The HTML element corresponding to the ChatGPT text will usually be highlighted automatically. If not, hover over the various <div> tags in the HTML until you find the one that corresponds to the ChatGPT text. Click on it to select it.

Step 3: Identify the CSS Class Responsible for the Grey Background

With the relevant HTML element selected, look at the right-hand pane where the CSS styles are displayed.
You’ll often find multiple CSS classes applied to the element. For example, you might see something like class="group w-full text-token-text-primary border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]".
The grey background is usually specified by a class that starts with bg-. In our example, that’s bg-gray-50.

Step 4: Edit the CSS Class to Remove the Grey Background

Double-click on the class responsible for the grey background (bg-gray-50 in our example) to make it editable.
Delete just that class, leaving all the other classes intact. In our example, remove bg-gray-50 but leave the other classes like group, w-full, etc.
Press Enter or click anywhere outside the editable area to save the changes.

Step 5: Copy the Modified Text

Now that the grey background has been removed, select and copy the ChatGPT text as you normally would.
The copied text will retain all other formatting (bold, italics, hyperlinks, etc.) but will no longer have the grey background.

This technique provides a granular level of control over what you’re copying. It might seem a bit technical, but once you’ve done it a few times, it becomes a quick and straightforward process.

Option 3: Alternative Solutions

Text Sanitizer Tools: There are online tools where you can paste your text to sanitize it, i.e., selectively remove certain types of formatting while retaining others. These tools often allow quite granular control over what to keep and what to remove.
Built-in “Remove Formatting”: In Gmail, after pasting the text, you could highlight just the grey-background text and then use Gmail’s “Remove Formatting” (the ‘T’ icon). This will remove all formatting, so you’d have to manually reapply the other formats (like bold, italics, etc.), but it will get rid of the grey background.

In conclusion, retaining the essential formatting while getting rid of the grey background when copying text from ChatGPT is possible with a few smart techniques. Whether you use Google Docs as an intermediary, dive into HTML and CSS through your browser’s Developer Tools, or opt for simpler methods like text sanitizers or Gmail’s ‘Remove Formatting’ feature, each approach has its own advantages and complexities. Choose the method that best suits your comfort level with technology and the specific requirements of where you plan to use the copied text.

About ZirconTech

At ZirconTech, we understand the importance of technology in driving business growth and achieving strategic objectives. Our comprehensive suite of services is designed to meet your business’s technological needs at every level. Whether it’s developing a cutting-edge product, managing intricate projects, or exploring outsourcing and offshoring solutions, we’ve got you covered.

Our expertise spans across various technological domains including blockchain, web development, artificial intelligence, machine learning, data analytics, and software development. Our agile methodologies ensure that the software we develop aligns perfectly with your business goals while adhering to high-quality standards.

Beyond software development, our project management services can steer your initiatives towards successful completion, covering everything from planning to risk management. If you’re looking to leverage outsourcing or offshoring for cost-effectiveness and flexibility, we’ll guide you through the entire process, ensuring a seamless transition and integration.

Partner with ZirconTech, and experience a harmonious blend of technological innovation and strategic planning, all aimed at propelling your business to new heights. With ZirconTech, you’re not just getting a service provider; you’re gaining a committed technology partner dedicated to ensuring your success.