FR | EN
Install
Documentation

Documentation - Effects.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Effects

CSS effects allow you to add depth, movement and interactivity to your interfaces. Marssel offers a simple syntax for applying shadows, transforms, opacities and other visual effects. These properties can be combined with :hover, :focus pseudo-classes and breakpoints to create dynamic and responsive user experiences.

Simple shadows

Preview
Light shadow
Medium shadow
Pronounced shadow
Strong shadow 
<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1)] p-[20px] bg-[fff]">
    Light shadow
</div>

<div class="shadow-[0_4px_8px_rgba(0,0,0,0.15)] p-[20px] bg-[fff]">
    Medium shadow
</div>

<div class="shadow-[0_8px_16px_rgba(0,0,0,0.2)] p-[20px] bg-[fff]">
    Pronounced shadow
</div>

<div class="shadow-[0_12px_24px_rgba(0,0,0,0.25)] p-[20px] bg-[fff]">
    Strong shadow
</div>

Colorful shadows

Preview
Blue shadow
Green shade
Red shadow 
<div class="shadow-[0_4px_12px_rgba(59,130,246,0.3)] p-[20px] bg-[fff]">
    Blue shadow
</div>
<div class="shadow-[0_4px_12px_rgba(16,185,129,0.3)] p-[20px] bg-[fff]">
    Green shade
</div>
<div class="shadow-[0_4px_12px_rgba(239,68,68,0.3)] p-[20px] bg-[fff]">
    Red shadow
</div>

Shadows with spread

Preview
Diffuse shadow
Internal shadow 
<div class="shadow-[0_4px_20px_8px_rgba(0,0,0,0.1)] p-[20px] bg-[fff]">
    Diffuse shadow
</div>
<div class="shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] p-[20px] bg-[f5f5f5]">
    Internal shadow
</div>

Multiple shadows

Preview
Multiple shadows 
<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1),0_8px_16px_rgba(0,0,0,0.1)] p-[20px] bg-[fff]">
    Multiple shadows
</div>

Shadows on the hover

Preview
Hover over me
Shadow on hover 
<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1)] shadow-[0_8px_16px_rgba(0,0,0,0.2)]:hover transition-[all_0.3s] p-[20px] bg-[fff] cursor-[pointer]">
    Hover over me
</div>

<div class="shadow-[none] shadow-[0_4px_12px_rgba(0,0,0,0.15)]:hover transition-[box-shadow_0.3s] p-[20px] bg-[fff] cursor-[pointer]">
    Shadow on hover
</div>

Opacity

Preview
Opacity 100%
Opacity 75%
Opacity 50%
Opacity 25% 
<div class="opacity-[1] bg-[0B63F3] p-[20px] mb-[10px] c-[fff]">
    Opacity 100%
</div>

<div class="opacity-[0.75] bg-[0B63F3] p-[20px] mb-[10px] c-[fff]">
    Opacity 75%
</div>

<div class="opacity-[0.5] bg-[0B63F3] p-[20px] mb-[10px] c-[fff]">
    Opacity 50%
</div>

<div class="opacity-[0.25] bg-[0B63F3] p-[20px] c-[fff]">
    Opacity 25%
</div>

Hover opacity

Preview
Fade on hover
Appearance on hover 
<div class="opacity-[1] opacity-[0.7]:hover transition-[opacity_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Fade on hover
</div>

<div class="opacity-[0.5] opacity-[1]:hover transition-[opacity_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Appearance on hover
</div>

Scale

Preview
Scale 0.5
Scale 1
Scale 1.5 
<!-- Reduction -->
<div class="transform-[scale(0.5)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Scale 0.5
</div>

<!-- Normal size -->
<div class="transform-[scale(1)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Scale 1
</div>

<!-- Enlargement -->
<div class="transform-[scale(1.5)] bg-[e2e2e2] p-[20px]">
    Scale 1.5
</div>

Scale to hover

Preview
Zoom on hover
Hover reduction 
<!-- Zoom on hover -->
<div class="transform-[scale(1)] transform-[scale(1.1)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Zoom on hover
</div>

<!-- Hover reduction -->
<div class="transform-[scale(1)] transform-[scale(0.95)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Hover reduction
</div>

Rotate

Preview
Rotation 2°
Rotation 15°
Rotation -5° 
<!-- Light rotation -->
<div class="transform-[rotate(2deg)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Rotation 2°
</div>

<!-- Average rotation -->
<div class="transform-[rotate(15deg)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Rotation 15°
</div>

<!-- Negative rotation -->
<div class="transform-[rotate(-5deg)] bg-[e2e2e2] p-[20px]">
    Rotation -5°
</div>

Rotate on hover

Preview
Rotate on hover
360° rotation 
<!-- Rotate on hover -->
<div class="transform-[rotate(0deg)] transform-[rotate(5deg)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Rotate on hover
</div>

<!-- Full rotation -->
<div class="transform-[rotate(0deg)] transform-[rotate(360deg)]:hover transition-[transform_1s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    360° rotation
</div>

Translate

Preview
Displacement
Y displacement
X and Y movement 
<!-- Horizontal movement -->
<div class="transform-[translateX(20px)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Displacement
</div>

<!-- Vertical movement -->
<div class="transform-[translateY(20px)] bg-[e2e2e2] p-[20px] mb-[10px]">
    Y displacement
</div>

<!-- Combined travel -->
<div class="transform-[translate(20px_20px)] bg-[e2e2e2] p-[20px]">
    X and Y movement
</div>

Translate to hover

Preview
Slide high
Right swipe 
<!-- Swipe up -->
<div class="transform-[translateY(0)] transform-[translateY(-5px)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Slide high
</div>

<!-- Swipe right -->
<div class="transform-[translateX(0)] transform-[translateX(10px)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Right swipe
</div>

Combined transformations

Preview
Scale + Rotate
Move + Rotate
Complex transformation 
<div class="transform-[scale(1)_rotate(0deg)] transform-[scale(1.1)_rotate(5deg)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Scale + Rotate
</div>

<div class="transform-[translateX(0)_rotate(0deg)] transform-[translateX(10px)_rotate(-5deg)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Move + Rotate
</div>

<div class="transform-[translateX(0)_translateY(0)_scale(1)_rotate(0deg)] transform-[translateX(5px)_translateY(-5px)_scale(1.05)_rotate(3deg)]:hover transition-[transform_0.3s] bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer]">
    Complex transformation
</div>

Blur

Preview
Sans flou
Flou léger
Flou moyen 
<div class="filter-[blur(0px)] mb-[10px]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Sans flou">
</div>

<div class="filter-[blur(2px)] mb-[10px]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Flou léger">
</div>

<div class="filter-[blur(5px)]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Flou moyen">
</div>

Brightness

Preview
Sombre
Lumineux 
<!-- Reduced brightness -->
<div class="filter-[brightness(0.4)] mb-[10px]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Sombre">
</div>

<!-- Increased brightness -->
<div class="filter-[brightness(1.3)]">
    <img src="https://placehold.co/300x200" class="w-[100%] rounded-[8px]" alt="Lumineux">
</div>

Grayscale

Preview
Couleur
Noir et blanc 
<!-- Color image -->
<div class="filter-[grayscale(0)] mb-[10px]">
    <img src="https://picsum.photos/id/13/300/200" class="w-[100%] rounded-[8px]" alt="Couleur">
</div>

<!-- Black and white image -->
<div class="filter-[grayscale(1)] filter-[grayscale(0)]:hover transition-[filter_0.3s] cursor-[pointer]">
    <img src="https://picsum.photos/id/13/300/200" class="w-[100%] rounded-[8px]" alt="Noir et blanc">
</div>

Combined filters

Preview
Flou lumineux
Effet vintage 
<!-- Blur + Brightness -->
<div class="filter-[blur(2px)_brightness(1.2)]">
    <img src="https://picsum.photos/id/13/300/200" class="w-[100%] rounded-[8px]" alt="Flou lumineux">
</div>

<!-- Grayscale + Contrast -->
<div class="filter-[grayscale(0.8)_contrast(1.2)] filter-[grayscale(0)_contrast(1)]:hover transition-[filter_0.5s] cursor-[pointer]">
    <img src="https://picsum.photos/id/13/300/200" class="w-[100%] rounded-[8px]" alt="Effet vintage">
</div>

Backdrop Filter

Preview
Background

Glass effect

Text on blurred background

<!-- Glass effect -->
<div class="pos-[relative] h-[300px] overflow-[hidden]">
    <img src="https://placehold.co/600x400" class="w-[100%] h-[100%] object-[cover]" alt="Background">

    <div class="pos-[absolute] top-[50%] left-[50%] transform-[translate(-50%_-50%)] backdrop-filter-[blur(10px)] bg-rgba-[255,255,255,0.3] p-[24px] rounded-[12px] border-[1px_solid_rgba(255,255,255,0.5)]">
        <h3 class="m-[0] mb-[8px]">Glass effect</h3>
        <p class="m-[0]">Text on blurred background</p>
    </div>
</div>

Transition animations

Preview
Fast transition (0.2s)
Normal transition (0.3s)
Slow transition (0.6s) 
<div class="bg-[0B63F3] bg-[2563eb]:hover p-[20px] c-[fff] cursor-[pointer] transition-[background-color_0.2s] mb-[10px]">
    Fast transition (0.2s)
</div>

<div class="bg-[0B63F3] bg-[2563eb]:hover p-[20px] c-[fff] cursor-[pointer] transition-[background-color_0.3s] mb-[10px]">
    Normal transition (0.3s)
</div>

<div class="bg-[0B63F3] bg-[2563eb]:hover p-[20px] c-[fff] cursor-[pointer] transition-[background-color_0.6s]">
    Slow transition (0.6s)
</div>

Transitioning Multiple Properties

Preview
Multiple transition
Targeted transitions 
<div class="bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer] transition-[all_0.3s] transform-[scale(1)] bg-[2563eb]:hover transform-[scale(1.05)]:hover shadow-[0_8px_16px_rgba(0,0,0,0.2)]:hover">
    Multiple transition
</div>

<div class="bg-[0B63F3] p-[20px] c-[fff] cursor-[pointer] transition-[background-color_0.3s__transform_0.3s__box-shadow_0.3s] transform-[scale(1)] bg-[2563eb]:hover transform-[scale(1.05)]:hover shadow-[0_8px_16px_rgba(0,0,0,0.2)]:hover">
    Targeted transitions
</div>

Card with effects

Preview

Interactive card

Hover elevation effect with shadow and displacement.

<div class="bg-[fff] rounded-[12px] p-[24px] shadow-[0_2px_8px_rgba(0,0,0,0.1)] shadow-[0_12px_24px_rgba(0,0,0,0.15)]:hover transform-[translateY(0)] transform-[translateY(-8px)]:hover transition-[all_0.3s] cursor-[pointer]">
    <h3 class="m-[0] mb-[12px]">Interactive card</h3>
    <p class="m-[0] c-[666]">Hover elevation effect with shadow and displacement.</p>
</div>

Button with complex effects

Preview 
<button class="bg-[0B63F3] c-[fff] py-[12px] px-[24px] rounded-[6px] border-[none] cursor-[pointer] shadow-[0_4px_12px_rgba(59,130,246,0.3)] transform-[scale(1)] opacity-[1] transition-[all_0.3s] bg-[2563eb]:hover transform-[scale(1.05)]:hover shadow-[0_6px_20px_rgba(59,130,246,0.4)]:hover opacity-[0.9]:active transform-[scale(0.98)]:active">
    Animated button
</button>

Image with hover overlay

Preview
Image
See more 
<div class="pos-[relative] overflow-[hidden] rounded-[12px] cursor-[pointer]">
    <img src="https://placehold.co/400x300" class="w-[100%] transform-[scale(1)] transition-[transform_0.5s] transform-[scale(1.1)]:hover" alt="Image">

    <div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%] bg-rgba-[0,0,0,0]] bg-rgba-[0,0,0,0.5]]:hover d-[flex] items-[center] justify-[center] transition-[background-color_0.3s]">
        <span class="c-[fff] font-size-[18px] font-weight-[600] opacity-[0] opacity-[1]:hover transition-[opacity_0.3s]">
            See more
        </span>
    </div>
</div>

Responsive effects

Preview
Responsive effects
Responsive shadow 
<div class="transform-[rotate(0deg)] md--transform-[rotate(5deg)] lg--transform-[scale(1.1)] bg-[0B63F3] p-[20px] c-[fff]">
    Responsive effects
</div>

<div class="shadow-[0_2px_4px_rgba(0,0,0,0.1)] md--shadow-[0_4px_8px_rgba(0,0,0,0.15)] lg--shadow-[0_8px_16px_rgba(0,0,0,0.2)] p-[20px] bg-[fff]">
    Responsive shadow
</div>
← Previous Dimensions
Next → Icons

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).