May 6, 2024
White Arrow icon
Back to all Elements

Live CSS Edit

An editable box of text that affects the website's CSS

There are 2 things needed to be done for this to work.

The first one is to add a single line of script to the page, turning the 'designMode' on:

<script>
 document.designMode = "on"
</script>

Copy

The second one is to configure the display property of the <style> tag as 'block':

<style style="display:block">

 body {
   background: white;
   font-size: 16px;
   color: #333;
 }

</style>

Copy

Preview:

browser mockup
Share:
Heart icon

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
Blue arrow iconWhite Arrow icon

Floating Labels Interaction

Cloneable
Code
CSS

A short CSS code for floating labels on a form

Read more
Blue arrow iconWhite Arrow icon