cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Background tricks with SVG, Box shadows and CSS Gradients

We can use box-shadow and border-image inside background-image, we can use there outline, and even transform. We can rotate CSS Gradients and even rotate a bunch of gradients at once!

Better view in Chrome/Opera, transforms inside backgrounds don't work for CSS gradients in Firefox. And I didn't test demos in IE.

A common principle:

  1. Take svg
  2. Add inline styles
  3. Encode SVG (http://yoksel.github.io/url-encoder/)
  4. Use code as background-image
  5. Enjoy!

    Look into a code for more details.

Аrticle in Russian: http://css.yoksel.ru/inline-styles-in-background/