CSS Hacks for Webflow nobody told you about

overscroll-behavior-y

Prevents the bounce effect most browsers apply when you scroll to the limits of the page. Toggle the checkbox and scroll on the published page to see the effect.

body {
  overscroll-behavior-y: none;
}

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

text-wrap

Makes your text look better by allowing the browser to figure out the best text wrapping solution. I like balance for headings and pretty for descriptions. **Don't add to everything though or the browser will struggle.

text-wrap: balance;

text-wrap: pretty;

BALANCED

I'm baby everyday carry pug retro umami truffaut.

PRETTY

I'm baby everyday carry pug retro umami truffaut.

Without

I'm baby everyday carry pug retro umami truffaut.

writing-mode

Vertical text without transforms.

writing-mode: vertical-lr;

writing-mode: vertical-rl;

VERTICAL-LR

I'm bae baby

VERTICAL-RL

I'm bae baby

clip-path

Clip-path allows us to clip unique shapes. Additionally, clip-path points can be animated to create really nice effects.

clip-path: circle(50%);

STAR

ANIMATED CIRCLE

scroll-bar-width

Define the size of a container's (often unsightly) scrollbar. Set to none to get rid of the scrollbar entirely.

scrollbar-width: none;

WITH

Pug same microdosing grailed kombucha pitchfork. Chambray fingerstache yes plz narwhal, everyday carry gluten-free marfa stumptown asymmetrical mukbang austin kitsch lumbersexual yuccie tacos. Pitchfork tote bag portland raclette put a bird on it yuccie poutine slow-carb. Health goth skateboard gluten-free, pug la croix dreamcatcher grailed cray synth YOLO wolf crucifix big mood bitters activated charcoal. Art party tofu street art, food truck poke plaid quinoa lumbersexual vaporware venmo meggings +1. Solarpunk blog salvia, butcher dreamcatcher kinfolk JOMO squid. Occupy copper mug offal affogato, poke next level chartreuse meggings salvia.Tbh chia jawn Brooklyn post-ironic artisan drinking vinegar DIY art party. Echo park fit waistcoat yr tilde chambray. VHS craft beer selfies, grailed sartorial master cleanse activated charcoal. Mlkshk Brooklyn small batch leggings, bruh chambray whatever iPhone lomo seitan fingerstache yr chillwave. Bushwick helvetica iPhone, chicharrones hoodie butcher meggings drinking vinegar vibecession jianbing.

WITHOUT

Pug same microdosing grailed kombucha pitchfork. Chambray fingerstache yes plz narwhal, everyday carry gluten-free marfa stumptown asymmetrical mukbang austin kitsch lumbersexual yuccie tacos. Pitchfork tote bag portland raclette put a bird on it yuccie poutine slow-carb. Health goth skateboard gluten-free, pug la croix dreamcatcher grailed cray synth YOLO wolf crucifix big mood bitters activated charcoal. Art party tofu street art, food truck poke plaid quinoa lumbersexual vaporware venmo meggings +1. Solarpunk blog salvia, butcher dreamcatcher kinfolk JOMO squid. Occupy copper mug offal affogato, poke next level chartreuse meggings salvia.Tbh chia jawn Brooklyn post-ironic artisan drinking vinegar DIY art party. Echo park fit waistcoat yr tilde chambray. VHS craft beer selfies, grailed sartorial master cleanse activated charcoal. Mlkshk Brooklyn small batch leggings, bruh chambray whatever iPhone lomo seitan fingerstache yr chillwave. Bushwick helvetica iPhone, chicharrones hoodie butcher meggings drinking vinegar vibecession jianbing.

mask-image

We can use mask-image to add linear gradients to the edges of divs for a nice fade effect.

mask-image: linear-gradient(to right, transparent 0%, white 10%, white 90%, transparent 100%);

With

I'm baby everyday carry pug retro umami truffaut.

Without

I'm baby everyday carry pug retro umami truffaut.

WITH

Pug same microdosing grailed kombucha pitchfork. Chambray fingerstache yes plz narwhal, everyday carry gluten-free marfa stumptown asymmetrical mukbang austin kitsch lumbersexual yuccie tacos. Pitchfork tote bag portland raclette put a bird on it yuccie poutine slow-carb. Health goth skateboard gluten-free, pug la croix dreamcatcher grailed cray synth YOLO wolf crucifix big mood bitters activated charcoal. Art party tofu street art, food truck poke plaid quinoa lumbersexual vaporware venmo meggings +1. Solarpunk blog salvia, butcher dreamcatcher kinfolk JOMO squid. Occupy copper mug offal affogato, poke next level chartreuse meggings salvia.Tbh chia jawn Brooklyn post-ironic artisan drinking vinegar DIY art party. Echo park fit waistcoat yr tilde chambray. VHS craft beer selfies, grailed sartorial master cleanse activated charcoal. Mlkshk Brooklyn small batch leggings, bruh chambray whatever iPhone lomo seitan fingerstache yr chillwave. Bushwick helvetica iPhone, chicharrones hoodie butcher meggings drinking vinegar vibecession jianbing.

WITHOUT

Pug same microdosing grailed kombucha pitchfork. Chambray fingerstache yes plz narwhal, everyday carry gluten-free marfa stumptown asymmetrical mukbang austin kitsch lumbersexual yuccie tacos. Pitchfork tote bag portland raclette put a bird on it yuccie poutine slow-carb. Health goth skateboard gluten-free, pug la croix dreamcatcher grailed cray synth YOLO wolf crucifix big mood bitters activated charcoal. Art party tofu street art, food truck poke plaid quinoa lumbersexual vaporware venmo meggings +1. Solarpunk blog salvia, butcher dreamcatcher kinfolk JOMO squid. Occupy copper mug offal affogato, poke next level chartreuse meggings salvia.Tbh chia jawn Brooklyn post-ironic artisan drinking vinegar DIY art party. Echo park fit waistcoat yr tilde chambray. VHS craft beer selfies, grailed sartorial master cleanse activated charcoal. Mlkshk Brooklyn small batch leggings, bruh chambray whatever iPhone lomo seitan fingerstache yr chillwave. Bushwick helvetica iPhone, chicharrones hoodie butcher meggings drinking vinegar vibecession jianbing.

user-select

Prevent user fro selecting text that probably shouldn't get selected.

user-select: none;

With

I'm baby everyday carry pug retro umami truffaut.

Without

I'm baby everyday carry pug retro umami truffaut.

color inherit

Set color inherit on the All Links selector to prevent the default blue color.

color: inherit;

WITH

Text Link

WITHOUT

Text Link

::selection

Style the default color of text selection.

::selection: {
  background: #fb5844;
}

WITH

Go ahead and select this text!

img::selection

Prevent image selection color when making selections.

img::selection: {
  background: transparent;
}

WITH

accent-color

Sets custom color on UI elements like inputs.

accent-color: #fb5844;

WITH

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

WITHOUT

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

caret-color

Sets custom cursor caret on text entry inputs.

caret-color: #fb5844;

WITH

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

WITHOUT

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

resize

Only allow text area resizing in the vertical direction

resize: vertical;

WITH

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

WITHOUT

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

:has :hover :not

Select all elements not hovered when one of those items is hovered.

.example-grid_four:has(.grid-box:hover) .grid-box:not(:hover) {
	filter: brightness(50%)
}

Invert Lightbox Thumbnails

Webflow default lightbox sets opacity on the active lightbox thumbnail. This CSS will reverse that behavior.

/* Set the default opacity for non-active thumbnails */
.w-lightbox-item {
    opacity: 0.3;
}

/* Override the opacity for the active thumbnail */
.w-lightbox-item.w-lightbox-active {
    opacity: 1;
}

/* Ensure the active thumbnail is highlighted when the lightbox is first opened */
.w-lightbox-strip .w-lightbox-item.w-lightbox-active {
    opacity: 1;
}

WITH

isolation

A pure way to create a stacking context and stop fighting with z-index. Use to "group" a set of elements into their own stacking context.

isolation: isolate;

WITH

BAE

WITHOUT

BAE

WITH

WITHOUT

.w--open and :has to de-emphasize background content on dropdown open

Apply styles to body contents when a dropdown is open. I love to use this to de-emphasize body content when a nav dropdown is open.

.bg-dd_example:has(.bg-dd_dropdown.w--open) .bg-dd_content {
  filter: grayscale(80%) blur(5px) !important;
}

EXMAPLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.wf-design-mode

Hide elements in designer view yet still show on published site

.wf-design-mode .example_wf-design-mode {
  display: none;
}

With

Not visible in designer

Without

This is visible

.wf-editor

Hide elements in editor view yet still show on published site

.wf-editor .example_wf-editor {
  display: none;
}

WITH

Not visible in editor

WITHOUT

This is visible