bitstorm.org

Weblog by Edwin Martin about frontend webdevelopment and related topics

Introducing BlendBlastCSS

Drawing for random colored rectangles

Released today… BlendBlastCSS, the revolutionary new visual CSS color framework.

Prepare to have your world ROCKED and your screens SIZZLED with the most electrifying CSS color framework to ever grace the digital universe!

Say goodbye to boring old RGB and HEX codes. Who knows which colors #d2691e and rgb(153, 50, 204) are? Exactly: nobody! We’re taking CSS color to the NEXT LEVEL with our mind-bending, eye-popping, jaw-dropping CSS color system: BlendBlastCSS.

BlendBlastCSS’s color system is super simple: even a toddler understands. You only use a couple of colors and match and mix them to get any color you can think of.

What’s amazing about that? I’ll tell you what’s amazing about that: in the CSS code, these colors are always visible. Yes, even ouside of your IDE!

Paste your clever CSS snippet on X: the colors are visible! Send an email to your colleague with the CSS that will make an end to the company’s boring website? You already guessed it: the colors in the email are visible!

I know your brain is hurting right now trying to figure out how this could work. So let’s show an example and blow your mind.

To make all H1 tags red, you simply do this:

h1 {
    color: var(--🟥);
}

You’re too good for just plain red? Need a touch of elegance? Reach for “Royal Velvet” and watch as your website exudes sophistication and class! How to do this? Just blend red and blue, just like you did in kindergarten.

.pop-button {
    color: color-mix(in lch, var(--🟥) 20%, var(--🟦));
}

Mind blowing, isn’t it? It isn’t called BlendBlastCSS for nothing.

With just five colors, the BlendBlastCSS system unlocks an infinite spectrum of design possibilities, revolutionizing how you define colors in CSS.

var(--🟥)
var(--🟩)
var(--🟦)
var(--⬛)
var(--⬜)

Free bonus colors included

Hold onto your hats and prepare to be ASTOUNDED because BlendBlastCSS is about to blow your mind with not just one, not two, not three, but FOUR bonus colors that will turn the way you think about CSS color palettes upside down!

var(--🟨)
var(--🟧)
var(--🟪)
var(--🟫)

Don’t wait – join the COLOR REVOLUTION today and let BlendBlastCSS be your guide to a world of endless chromatic possibilities!

That’s right, folks – forget about painstakingly selecting colors for your websites, apps, and projects. With BlendBlastCSS, you’ll simply SPIN the wheel of chromatic fortune and watch as your designs are infused with WILD, and totally INSANELY BLENDED color combinations!

Dazzling showcase

Visit the BlendBlastCSS demo page and see the dazzling showcase of digital sorcery with your own eyes:

CSS hero testimonial

Even CSS hero Eric A. Meyer stands captivated, utterly impressed by the sheer brilliance and ingenuity of BlendBlastCSS.

The liner separating genius from insanity has never been finer.

Use in your own CSS

To incorporate the BlendBlastCSS framework into your own code, simply import the stylesheet and assign the colors and blends to any element you wish to style with your vibrant palette.

<link rel="stylesheet" 
      href="https://cdn.jsdelivr.net/gh/edwinm/blend-blast-css/src/blendblast.css">

With this simple integration, your elements will burst with the dynamic colors of BlendBlastCSS, instantly transforming your website into a visual masterpiece! 🌈✨