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
![](https://cdn.prod.website-files.com/6679cd923bd3789834026f6e/6679cd923bd3789834026fea_logo-300-300.jpg)
ANIMATEDÂ CIRCLE
![](https://cdn.prod.website-files.com/6679cd923bd3789834026f6e/6679cd923bd3789834026fea_logo-300-300.jpg)
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
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.
I'm baby everyday carry pug retro umami truffaut.
Without
I'm baby everyday carry pug retro umami truffaut.
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.
I'm baby everyday carry pug retro umami truffaut.
Without
I'm baby everyday carry pug retro umami truffaut.
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;
::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
![](https://cdn.prod.website-files.com/6679cd923bd3789834026f6e/6679cd923bd3789834026fea_logo-300-300.jpg)
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%)
}
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;
}
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
![](https://cdn.prod.website-files.com/6679cd923bd3789834026f6e/6679cd923bd3789834026fe9_wb-webclip-256.jpg)
BAE
WITHOUT
![](https://cdn.prod.website-files.com/6679cd923bd3789834026f6e/6679cd923bd3789834026fe9_wb-webclip-256.jpg)
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
Nav Dropdown
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