Clip Linear

Fade edges for horizontal scrolling containers or carousels.

.clip-linear --clip-size: 50px

Design

Development

Marketing

Analytics

Strategy

Branding

Product

Research

Content

SEO

// both sides
<div class="clip-linear">...</div>

// one side only
<div class="clip-linear-start">...</div>
<div class="clip-linear-end">...</div>

// custom size
<div class="clip-linear" style="--clip-size: 100px">...</div>