How to use the brat text generator
- Type your word or phrase into the Your text field.
- The tool automatically converts your input to lowercase.
- Copy the generated
<style>and<div>block. - Paste the code into an HTML file or web project to see the brat aesthetic.
How the brat aesthetic works
The original Brat album cover by Charli XCX uses a specific combination of color, typography, and effects. The background is a vivid lime green with the hex code #8ACE00. The text is rendered in a narrow sans-serif typeface similar to Arial Narrow, entirely in lowercase, and slightly blurred using a CSS filter.
This brat text generator recreates those properties with standard CSS. The blur radius is set to 0.75 pixels via filter: blur(0.75px), which softens the edges without making the letters unreadable. The font weight is set to bold, and letter spacing is tightened to mimic the compressed look of the original artwork.
CSS values reference
If you want to customize the output manually, here are the core values used to build the brat aesthetic:
| Property | Value | Purpose |
|---|---|---|
background-color | #8ACE00 | The signature lime green |
color | #000000 | Black text for contrast |
font-family | 'Arial Narrow', Arial, sans-serif | Narrow sans-serif typeface |
text-transform | lowercase | Forces all letters to lowercase |
filter | blur(0.75px) | Slight blur on the text |
letter-spacing | -0.05em | Tightens spacing between characters |
Where to use the generated code
The HTML and CSS produced by this brat text generator can be pasted directly into any web page, blog post that allows custom HTML, or frontend project. It works in all modern browsers because it relies only on standard CSS properties like filter and text-transform.
Common uses include styling fan pages, creating social media graphics by screenshotting the rendered HTML, or adding the brat aesthetic to personal websites. If you need other typographic styles, tools like the italics text generator or the twisted text generator produce Unicode-based text transformations instead of CSS.
Why lowercase matters
The defining feature of the Brat cover is that every letter is lowercase. Uppercase letters change the visual weight and break the aesthetic entirely. This tool automatically applies text-transform: lowercase in the CSS and also converts the raw text string to lowercase before inserting it into the HTML output.
Even if you type "SO JULIA" or "Brat", the generated code will contain "so julia" and "brat". This ensures the final rendering matches the source material regardless of how you enter the text.
Adjusting the blur intensity
The default blur value of 0.75px closely matches the album cover. However, screen resolutions and font sizes can make the effect appear stronger or weaker than intended. You can adjust the blur by changing the number inside the blur() function in the generated CSS.
blur(0px)removes the blur entirely for crisp text.blur(0.5px)gives a very subtle softness.blur(1.5px)creates a noticeably out-of-focus look.
Keep the value under 2 pixels to maintain readability. The goal of the brat aesthetic is slight imperfection, not illegibility.
Worked examples
Each result below was produced by the same code the tool runs, so you can check your own numbers against them.
| Example | Input | Result |
|---|---|---|
| Default | Your text: brat | <style> / .brat-cover { / background-color: #8ACE00; / display: flex; / align-items: center; / justify-content: center; / min-height: 300px; / padding: 40px 20px; / } / .brat-text { / color: #000000; / font-family: 'Arial Narrow', Arial, sans-serif; / font-size: clamp(3rem, 10vw, 8rem); / font-weight: bold; / text-transform: lowercase; / letter-spacing: -0.05em; / filter: blur(0.75px); / text-align: center; / line-height: 1; / word-break: break-word; / } / </style> / <div class="brat-cover"> / <div class="brat-text">brat</div> / </div> |
| Custom phrase | Your text: so julia | <style> / .brat-cover { / background-color: #8ACE00; / display: flex; / align-items: center; / justify-content: center; / min-height: 300px; / padding: 40px 20px; / } / .brat-text { / color: #000000; / font-family: 'Arial Narrow', Arial, sans-serif; / font-size: clamp(3rem, 10vw, 8rem); / font-weight: bold; / text-transform: lowercase; / letter-spacing: -0.05em; / filter: blur(0.75px); / text-align: center; / line-height: 1; / word-break: break-word; / } / </style> / <div class="brat-cover"> / <div class="brat-text">so julia</div> / </div> |
| Longer quote | Your text: girl, so confusing | <style> / .brat-cover { / background-color: #8ACE00; / display: flex; / align-items: center; / justify-content: center; / min-height: 300px; / padding: 40px 20px; / } / .brat-text { / color: #000000; / font-family: 'Arial Narrow', Arial, sans-serif; / font-size: clamp(3rem, 10vw, 8rem); / font-weight: bold; / text-transform: lowercase; / letter-spacing: -0.05em; / filter: blur(0.75px); / text-align: center; / line-height: 1; / word-break: break-word; / } / </style> / <div class="brat-cover"> / <div class="brat-text">girl, so confusing</div> / </div> |
FAQ
What exact green does the brat text generator use?
The background color is set to hex code #8ACE00, which is the specific shade of lime green used on the Charli XCX Brat album cover.
Can I use this for commercial projects?
The CSS and HTML code generated here is yours to use freely. However, the Brat album artwork itself is copyrighted, so avoid using the generated design to imply official endorsement or to sell merchandise.
Why is the text blurry?
The original album cover features slightly out-of-focus text. The generated CSS uses a blur filter of 0.75 pixels to replicate that specific lo-fi look.
Does this tool upload my text to a server?
No. The conversion happens entirely in your browser using JavaScript. Your input is never sent anywhere.
Can I change the font?
The generated CSS defaults to Arial Narrow, which closely resembles the original typeface. You can edit the font-family property in the output to use any narrow sans-serif font installed on your system.
How is this different from Unicode text generators?
Unicode tools replace standard characters with special symbols. This brat text generator outputs standard HTML styled with CSS, meaning the text remains selectable, searchable, and accessible to screen readers.