CSS Inline | High-performance CSS inlining

High-performance library for inlining CSS into HTML 'style' attributes

css-inline uses components from Mozilla's Servo project and provides bindings for Rust, Python, Ruby, JavaScript, Java, C, and PHP. The playground runs the library compiled to WebAssembly in the browser. Paste HTML with CSS into the text area and click "Inline" to process the output.

Input HTML

Paste HTML with CSS and adjust the settings on the right before inlining.

HTML

Runs in your browser

Configuration

Toggle common css-inline options before running the inliner.

Inline style tagsExtract CSS from style tags and apply it to elements.Keep style tagsPreserve original style tags after inlining.Keep link tagsRetain external link tags in the output.Keep media/@rulesPreserve media queries and other at-rules.Minify CSSRemove redundant whitespace inside generated inline styles.Apply width attributesAdd HTML width attributes from CSS for Outlook compatibility.Apply height attributesAdd HTML height attributes from CSS for Outlook compatibility.

Extra CSSInject additional CSS rules before inlining.

These options apply the next time you press Inline.