What is some of the coolest/best/worse abuses of CSS?

For example, these shapes, or using multiple box-shadows to make pixel art.

ending on 16/04/14.

  • 14
    \$\begingroup\$ Using it inline in style attributes and adding !important to each one. \$\endgroup\$
    – user80551
    Commented Mar 9, 2014 at 10:17
  • \$\begingroup\$ How do you define an abuse? I'm off-topic but thanks for the link with inspiring shapes. \$\endgroup\$ Commented Mar 9, 2014 at 14:01
  • \$\begingroup\$ @n.1 Something that was clearly not intended when the specifications were made. \$\endgroup\$
    – 930913
    Commented Mar 9, 2014 at 20:25
  • \$\begingroup\$ This question doesn't comply with the rules. \$\endgroup\$ Commented Mar 9, 2014 at 22:29
  • \$\begingroup\$ The Internet... \$\endgroup\$
    – TwoThe
    Commented Mar 10, 2014 at 13:40

4 Answers 4


Some dude created a tool to convert any image to pure CSS. This goes well beyond the original intent of CSS.

Here is an example (The famous Mona Lisa): http://codepen.io/jaysalvat/pen/HaqBf

And here is the tool : https://github.com/jaysalvat/image2css

  • \$\begingroup\$ Holy virgin mother of god! That is quite a great tool when you make a gradient background and you (for some reason) don't have the code near you and you need it. \$\endgroup\$ Commented Mar 9, 2014 at 19:53

Changing images on the fly

I won't necessarily call it abuse, but you can use CSS to replace an IMG with a given SRC to show a completely different image.

@media print
        padding: 150px 200px 0px 0px; 
        background: url('lady.jpg'); 
        width:0px; height: 0px;

See: https://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

Can be lots of fun combined with @media selectors to display completely different images when printing a webpage. (Same trick can be done in PDF btw. Nice to see the face of the guy that is printing a document and all serious looking charts are replaced by beautiful ladies :))

  • \$\begingroup\$ +1 For cruel but ingenious ways of paying back on colleagues... Not that I would do it of course... \$\endgroup\$ Commented Mar 11, 2014 at 10:03
  • \$\begingroup\$ best use i've seen with img{background-image} was embedding an animated gif with a jpg background \$\endgroup\$
    – albert
    Commented Jul 30, 2014 at 2:16

Resizable elements:

You can add resize:both to allow an element to be resized by the user.
On some browsers, this is only supported on <textarea>'s.

Real-time CSS preview:

This is not an actual css thing, but you can add the contenteditable property, add the property style="display:block;z-index:99;width:500px;height:500px;resizable:both;" and you can edit your CSS.

Styled CSS Checkboxes/radiobuttons:

Using the following piece of markup as example:

<input type="checkbox" id="check_all" name="check_all" value="1">
<label for="check_all">Check all</label>

You can use display:none on the <input> and, using CSS3 selectors, you can set a 'sprite' background to show the different states of the checkbox/radiobutton.

The order of the elements is important, and matching the for="" property with the id="" in the input is even more important!

You can see some examples here: http://www.csscheckbox.com/

Browser specific selectors:

We all have tried to use some sort of javascript mix with css classes and media-queries...

Well, here are a few browser specific selectors:

doesnotexist:-o-prefocus, #selector {}/*opera only*/
:root {}/*target all css3 browsers*/
:-moz-any(*){}/*mozilla and mozilla based only*/
:-webkit-any(*){}/*webkit only*/

For IE, you have tons of selectors. No need for more.


I guess it depends what you mean by abuse but this would drive your users batty:



(as you mouse around the page everything jitters on you)

Experts-Exchange/Pay-To-View Effect

  text-shadow:0 0 5px rgba(0,0,0,0.5);

(makes all the text blurry)

"Animated GIF's" using CSS sprite sheets


(Java's "The Dude" waving his hand)


Not the answer you're looking for? Browse other questions tagged or ask your own question.