Brutalist Framework


Brutal Effects

Brutalize elements with some CSS and javascript-based effects.


Baffle adds an animated obfuscation effect to any text. Reload page to see effect.


.baffle - Baffles once upon page load.

.baffle-longer - Baffles once, but for a longer duration (3 seconds).

.baffle-prolonged - Baffles for a prolonged period.

.baffle-forever - .baffle-forever - Baffles endlessly.


Fittext makes any text aggressively responsive. Re-size your browser window to see them scale!

.fittext - Best scales text to fit within container.

Brutalist Framework

.fittext-compress - Increases compression.

Brutalist Framework

.fittext-uncompress - Decreases compression.

Brutalist Framework

Below are fittext classes that are ideal for H1 - H6 tags.







Warp your text into curves, spirals, circles, and waves! Works best on paragraphs. All are fully responsive.


Arc Text allows you to create a responsive arch of text!


Bezier Text allows you to create curvy responsive text!


Circle Text allows you to create a responsive circle of text!


Wave Text allows you to create a responsive wave of text!


Spiral Text allows you to become sucked into another dimension! It is fully responsive, too!

Equal Heights

Equal heights makes boxes the same height within a multi-column layout. In the example below, notice how all 3 column boxes have the same height.


Column One
This box has 2 lines of text

Column Two
This box has several lines of text.
Some small text.
Another small text line.

Column Three
This box has 2 lines of text

Brutal Text Effect

Apply these classes to any text for a brutal text effect!


Default brutal (black) text


Brutal monochrome (blue) text


Brutal neon (lime) text


Add a glitch effect to any element! Works on images and text, or even entire areas! It is entirely CSS-based. Apply .glitch class to any element.

Glitched Circle Image


Glitched Paragraph

This is a rather glitchy paragraph. You could even baffle all your firking enemies!

This paragraph has just one glitched word, using the span tag.


Blink is back! Apply theses classes to blink any element, even entire areas! Requires brutalist.js and start.brutalizing.js.




Here is a fast-blinking span and image:
Fast-blinking Image


Get Your Blinker Fluid NOW!
Blinker Fluid


Apply a throbbing, pulsing effect. It's CSS-based, so no javascript is needed. Simply apply the class .throb to an element.

Image Example


Content Block Example
See how I throb!


Clip-Box allows you to apply a custom background image to any text!

.clip-box - Outer wrapper for area to contain text with background image.
.clip-box-cover - Makes the background image fluid

Apply Background Image: Create a custom class in the theme CSS file, and specify the background-image url.

DEMO 1: Clip-Box text in a vanilla-cherry-gradient container.


DEMO 2: Clip-Box text inside a custom cover image area (stacks are needed for this).



Version 1.5