7 Advanced CSS Tricks to Make Your Websites Look Stunning (Part 4)

CSS Tricks to Make Your Websites Look Stunning

Pratik Tamhane in Bootcamp · 2025-01-12 13:53 · 1 claps · 12.0 min read paywalled

#ui-trends #ui-thinking #modern-ui-design #ui-ux-design #website-design

Wiki topics: UX · UI/UX Design 🌐 · Web Development

7 Advanced CSS Tricks to Make Your Websites Look Stunning (Part 4)

7 Advanced CSS Tricks to Make Your Websites Look Stunning (Part 4)

Welcome to the fourth installment of this series! By now, you’ve already mastered the foundational tricks (and maybe some intermediate ones), but today, we’re diving into advanced CSS techniques that can truly transform your website into a masterpiece.

These tricks require a little more finesse, but trust me—they're worth every second of effort. Let’s jump right in!

1. Custom Cursor Effects

Say goodbye to the boring default cursor and hello to custom cursors that add personality to your site.

Custom Cursor Effects

Custom Cursor Effects

How It Works:

CSS:

A custom-cursor div is styled with a radial gradient to create a glowing effect.
The cursor: none property hides the default cursor.
A subtle pulsing animation (pulse) is added to make the custom cursor more dynamic.

2. JavaScript:

The mousemove event is used to update the position of the custom cursor (customCursor) to follow the mouse.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Cursor Effect</title>
  <style>
    /* Reset styles */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #1e1e2f;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: none; /* Hide default cursor */
    }

    h1 {
      color: #ffffff;
      font-size: 2rem;
      text-align: center;
    }

    /* Custom cursor */
    .custom-cursor {
      width: 15px;
      height: 15px;
      position: absolute;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 9999;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.5);
        opacity: 0.5;
      }
    }
  </style>
</head>
<body>
  <h1>Move your mouse to see the custom cursor effect!</h1>
  <div class="custom-cursor" id="customCursor"></div>

  <script>
    const customCursor = document.getElementById('customCursor');

    document.addEventListener('mousemove', (e) => {
      customCursor.style.left = `${e.clientX}px`;
      customCursor.style.top = `${e.clientY}px`;
    });
  </script>
</body>
</html>

Copy and paste the code into an .html file and open it in your browser. You'll see the custom glowing cursor effect!

2. CSS Scroll-Snap for Seamless Scrolling

If you want to guide users through sections effortlessly,⁣scroll-snap is a game-changer.

CSS Scroll-Snap for Seamless Scrolling

CSS Scroll-Snap for Seamless Scrolling

Features:

CSS Scroll-Snap:

scroll-snap-type: y mandatory; ensures the scrolling snaps to sections along the vertical axis.
scroll-snap-align: start; ensures each section aligns at the top of the viewport when snapped.

2. Smooth Scrolling:

scroll-behavior: smooth; allows smooth transitions between sections.

3. Responsive Design:

Each section takes up the full viewport height (height: 100vh), ensuring a clean, immersive layout.

How to Use:

Copy the code into a file (e.g., scroll-snap.html).
Open it in your browser.
Scroll to see how each section snaps into place seamlessly.

This layout is perfect for portfolios, storytelling websites, or one-page designs!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Scroll Snap</title>
  <style>
    /* Reset and body styles */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      overflow: hidden; /* Prevent scrolling outside the snap container */
      background-color: #f0f0f5;
    }

    /* Scroll container with scroll-snap settings */
    .scroll-container {
      scroll-snap-type: y mandatory;
      overflow-y: scroll;
      height: 100vh;
      scroll-behavior: smooth;
    }

    /* Sections */
    .section {
      scroll-snap-align: start;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      font-weight: bold;
      color: white;
    }

    /* Different section styles */
    .section:nth-child(1) {
      background: linear-gradient(120deg, #6a11cb, #2575fc);
    }

    .section:nth-child(2) {
      background: linear-gradient(120deg, #ff7e5f, #feb47b);
    }

    .section:nth-child(3) {
      background: linear-gradient(120deg, #43cea2, #185a9d);
    }

    .section:nth-child(4) {
      background: linear-gradient(120deg, #ff9a9e, #fad0c4);
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
  </div>
</body>
</html>

When users scroll, each section will “snap” into place, creating a smooth navigation experience. This is great for storytelling websites or portfolios!

3. Conic Gradients for Creative Backgrounds

Conic Gradients for Creative Backgrounds

Conic Gradients for Creative Backgrounds

Features:

Conic Gradient:

The background: conic-gradient() creates a radial gradient effect, starting at the top and transitioning through the specified colors.

Rotating Animation:

The @keyframes rotateGradient smoothly rotates the gradient over time for a dynamic, eye-catching effect.

Responsive and minimal:

The gradient covers the entire viewport, and the text stays centered, making it perfect for hero sections or landing pages.

How to Use:

Copy and paste the code into a file (e.g., conic-gradient.html).
Open the file in your browser.
Watch the mesmerizing rotating gradient and enjoy its creativity! 🌈

You can tweak the colors and animation duration to match your design needs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotating Conic Gradient Background</title>
  <style>
    /* Reset and body styles */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: black;
      overflow: hidden;
      color: white;
      text-align: center;
    }

    /* Rotating conic gradient */
    .rotating-gradient {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: conic-gradient(
        from 0deg,
        #ff9a9e,
        #fad0c4,
        #fbc2eb,
        #a18cd1,
        #fbc2eb,
        #fad0c4,
        #ff9a9e
      );
      animation: rotateBackground 10s linear infinite;
    }

    h1 {
      position: relative;
      font-size: 3rem;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
      z-index: 1;
    }

    @keyframes rotateBackground {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="rotating-gradient"></div>
  <h1>Rotating Conic Gradient Background</h1>
</body>
</html>

This works beautifully for loading screens, banners, or even buttons.

4. 3D Transformations with Perspective

Want to make your elements look like they’re jumping off the screen? Use 3D transforms and perspective.

3D Transformations with Perspective

3D Transformations with Perspective

Features:

Perspective:

The perspective property gives depth to the 3D effect. A smaller value makes the scene more dramatic, while a larger value makes it subtler.

3D Transformations:

transform: rotateY(180deg) flips the card in 3D space.

Smooth Animation:

The transition property ensures a smooth flipping animation.

Backface Visibility:

The backface-visibility: hidden hides the back side of the card when the front is visible and vice versa.

How to Use:

Save the code as 3d-transformations.html.
Open it in your browser.
Hover over the card to see it flip smoothly in 3D.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Transformations with Perspective</title>
  <style>
    /* Reset styles */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: linear-gradient(168deg, #272c58, #41245e);
      color: white;
      perspective: 1000px; /* Adds 3D perspective to the scene */
    }

    .card-container {
      width: 300px;
      height: 400px;
      perspective: 1500px; /* Depth for the 3D effect */
    }

    .card {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #ff9a9e, #fad0c4);
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      transform-style: preserve-3d;
      transform: rotateY(0deg);
      transition: transform 0.6s ease-in-out;
    }

    .card:hover {
      transform: rotateY(180deg); /* Rotate the card on hover */
    }

    .card-content {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden; /* Hides the back when front is visible */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      padding: 20px;
      border-radius: 15px;
    }

    .card-front {
      background: linear-gradient(135deg, #a18cd1, #fbc2eb);
    }

    .card-back {
      background: linear-gradient(135deg, #fad0c4, #ff9a9e);
      transform: rotateY(180deg); /* Flips the back side */
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <!-- Front of the card -->
      <div class="card-content card-front">
        3D Front Side
      </div>
      <!-- Back of the card -->
      <div class="card-content card-back">
        3D Back Side
      </div>
    </div>
  </div>
</body>
</html>

Feel free to adjust the width, height, colors, and rotation speed to match your needs! 🚀

This trick is perfect for showcasing products, portfolios, or creative cards.

5. Complex Shape Animations with CSS Masks

Create dynamic shapes and animations using mask or clip-path.

Complex Shape Animations with CSS Masks

Complex Shape Animations with CSS Masks

Features of This Code:

CSS Masks:

The mask-image property creates a masking effect, where only parts of the background are revealed based on the mask shape.
The radial-gradient mask creates a circular reveal effect.

Animation:

The @keyframes gradually changes the mask size from 100% to 300%, creating a smooth animation effect.
ease-in-out makes the animation smooth at the start and end.

Cross-Browser Support:

Added -webkit-mask-* properties for compatibility with WebKit-based browsers like Chrome and Safari.

Dynamic Text:

The ::after pseudo-element adds centered text inside the animated masked area.

How It Works:

Mask Dynamics:

The mask starts small (100%) and grows larger (300%), making the background dynamically visible.

Radial Mask:

The circular radial mask makes it appear as if the shape is expanding or contracting dynamically.

How to Use:

Save the code as css-masks.html.
Open it in your browser.
Watch the dynamic circular mask grow and shrink, revealing the colorful gradient background.

Feel free to experiment with mask-image, mask-size, colors, or even combine multiple gradients for unique effects! 🌟

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Complex Shape Animations with CSS Masks</title>
  <style>
    /* Reset styles */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(120deg, #272c58, #41245e);
      overflow: hidden;
      color: white;
    }

    .animated-mask {
      position: relative;
      width: 300px;
      height: 300px;
      background: linear-gradient(135deg, #ff9a9e, #fad0c4);
      mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 70%);
      -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 70%);
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      mask-position: center;
      -webkit-mask-position: center;
      mask-size: 200%;
      -webkit-mask-size: 200%;
      animation: maskAnimation 4s infinite alternate ease-in-out;
    }

    /* Text inside the shape */
    .animated-mask::after {
      content: "CSS Masks";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2rem;
      font-weight: bold;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }

    /* Keyframes for the mask animation */
    @keyframes maskAnimation {
      0% {
        mask-size: 100%;
        -webkit-mask-size: 100%;
      }
      100% {
        mask-size: 300%;
        -webkit-mask-size: 300%;
      }
    }
  </style>
</head>
<body>
  <div class="animated-mask"></div>
</body>
</html>

The result? Stunning animated text that grabs attention immediately!

6. Glassmorphism with Backdrop Filters

Glassmorphism with Backdrop Filters

Glassmorphism with Backdrop Filters

Features of the Code:

Glassmorphism Effect:

The backdrop-filter and -webkit-backdrop-filter properties create the frosted glass effect.
A semi-transparent rgba(255, 255, 255, 0.2) background adds the glassy look.

Gradient Background:

A vibrant, animated gradient using @keyframes enhances the visual appeal.

3. Card Styling:

Rounded corners (border-radius), subtle borders, and shadows (box-shadow) create depth and realism.

Interactive Button:

The button has a hover effect, including translation and shadow changes.

How to Use:

Save this code as glassmorphism.html.
Open it in your browser.
Enjoy the frosted glass effect with an interactive button on a colorful gradient background.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism with Backdrop Filters</title>
  <style>
    /* Reset styles */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a18cd1);
      background-size: 400% 400%;
      animation: gradientAnimation 6s infinite alternate ease-in-out;
    }

    /* Gradient animation for the background */
    @keyframes gradientAnimation {
      0% {
        background-position: 0% 50%;
      }
      100% {
        background-position: 100% 50%;
      }
    }

    /* Glassmorphism card */
    .glass-card {
      width: 300px;
      height: 400px;
      background: rgba(255, 255, 255, 0.2); /* Transparent white */
      border-radius: 15px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px) saturate(150%);
      -webkit-backdrop-filter: blur(10px) saturate(150%);
      border: 1px solid rgba(255, 255, 255, 0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      text-align: center;
      color: #fff;
    }

    .glass-card h2 {
      font-size: 1.8rem;
      margin-bottom: 10px;
    }

    .glass-card p {
      font-size: 1rem;
      margin-bottom: 20px;
    }

    .glass-card button {
      background: linear-gradient(135deg, #a18cd1, #fbc2eb);
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 1rem;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .glass-card button:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <div class="glass-card">
    <h2>Welcome</h2>
    <p>This is a frosted glass effect card.</p>
    <button>Click Me</button>
  </div>
</body>
</html>

Feel free to customize the blur, saturation, colors, or dimensions to fit your design needs! 🌟

7. 8 different animations, showcasing a variety of effects like scaling, rotating, bouncing, fading, and more

8 different animations, showcasing a variety of effects

8 different animations, showcasing a variety of effects

Explanation of Animations:

Scale: grows and shrinks the element on hover.
Rotate: Spins the element in a full circle.
Bounce: Moves the element up and down like a bouncing ball.
Fade: gradually changes the element’s opacity.
Flip: Rotates the element on the X-axis, creating a flipping effect.
Wiggle: Creates a playful left-right shaking effect.
Pulse: gently scales and fades the element to mimic a heartbeat.
Skew: Tilts the element diagonally for a dynamic effect.

How to Use:

Save this code as animations.html.
Open it in your browser.
Hover over each box to see its unique animation.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>8 New CSS Animations</title>
  <style>
    /* Reset styles */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 20px;
      min-height: 100vh;
      background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a18cd1);
      background-size: 400% 400%;
      animation: backgroundAnimation 8s infinite alternate ease-in-out;
      color: #fff;
    }

    @keyframes backgroundAnimation {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }

    .box {
      width: 120px;
      height: 120px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(5px);
      border: 2px solid rgba(255, 255, 255, 0.5);
    }

    /* 1. Scaling */
    .scale:hover {
      animation: scaleEffect 0.8s infinite ease-in-out;
    }
    @keyframes scaleEffect {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }

    /* 2. Rotation */
    .rotate:hover {
      animation: rotateEffect 1s infinite linear;
    }
    @keyframes rotateEffect {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* 3. Bounce */
    .bounce:hover {
      animation: bounceEffect 0.8s infinite ease-in-out;
    }
    @keyframes bounceEffect {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

    /* 4. Fade */
    .fade:hover {
      animation: fadeEffect 1.5s infinite alternate ease-in-out;
    }
    @keyframes fadeEffect {
      0% { opacity: 1; }
      100% { opacity: 0.5; }
    }

    /* 5. Flip */
    .flip:hover {
      animation: flipEffect 1s infinite ease-in-out;
    }
    @keyframes flipEffect {
      0% { transform: rotateX(0); }
      50% { transform: rotateX(180deg); }
      100% { transform: rotateX(360deg); }
    }

    /* 6. Wiggle */
    .wiggle:hover {
      animation: wiggleEffect 0.6s infinite ease-in-out;
    }
    @keyframes wiggleEffect {
      0%, 100% { transform: rotate(0); }
      25% { transform: rotate(10deg); }
      75% { transform: rotate(-10deg); }
    }

    /* 7. Pulse */
    .pulse:hover {
      animation: pulseEffect 1s infinite ease-in-out;
    }
    @keyframes pulseEffect {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.7; }
    }

    /* 8. Skew */
    .skew:hover {
      animation: skewEffect 0.8s infinite ease-in-out;
    }
    @keyframes skewEffect {
      0%, 100% { transform: skew(0deg, 0deg); }
      50% { transform: skew(10deg, -10deg); }
    }
  </style>
</head>
<body>
  <div class="box scale">Scale</div>
  <div class="box rotate">Rotate</div>
  <div class="box bounce">Bounce</div>
  <div class="box fade">Fade</div>
  <div class="box flip">Flip</div>
  <div class="box wiggle">Wiggle</div>
  <div class="box pulse">Pulse</div>
  <div class="box skew">Skew</div>
</body>
</html>

Feel free to customize the durations, timing functions, or styles for your specific needs! 🌟

Part 3:

[embed]7 More CSS Tricks to Make Your Websites Look Stunning (Part 3) CSS Tricksmedium.com

Part 2:

[embed]Part 2: Top 7 CSS Tricks to Make Your Websites Look Stunning Css Tricksmedium.com

Part 1:

[embed]Top 7 CSS Tricks to Make Your Websites Look Stunning Aesthetic appeal ensures user engagementmedium.com

Wrapping Up

These advanced CSS tricks are here to inspire you to think outside the box and push your creative boundaries. Sure, they might require a bit more effort than your typical CSS properties, but the payoff is worth it.

What’s your favorite trick from this list? Or is there an advanced CSS technique you’ve tried that deserves a spotlight? Let me know in the comments—I'd love to learn from your experiences too!

Remember, every website is a canvas, and CSS is your paintbrush. So, let’s create something stunning together! 😊

[embed]Blend Modes for Stunning Visuals: A Simple Guide to Creative Effects Blend Modes for Stunning Visualsmedium.com

[embed]7 Best AI-Powered UX Design Tools, Techniques, and Best Practices for 2025 AI-Powered UX Designmedium.com

[embed]How to Change Dotted Line Design After Hover Using CSS Conditional Master Dynamic Hover Effects in React: A Step-by-Step Guide to Conditional Rendering with Inline Stylesmedium.com

메타데이터

post_id: b89d1ee9e673
slug: 7-advanced-css-tricks-to-make-your-websites-look-stunning-part-4-b89d1ee9e673
url: https://medium.com/design-bootcamp/7-advanced-css-tricks-to-make-your-websites-look-stunning-part-4-b89d1ee9e673
canonical_url: https://medium.com/design-bootcamp/7-advanced-css-tricks-to-make-your-websites-look-stunning-part-4-b89d1ee9e673
author_url: https://medium.com/@pratik111098
status: ok
fetched_at: 2026-06-14 13:58:26

7 Advanced CSS Tricks to Make Your Websites Look Stunning (Part 4)

1. Custom Cursor Effects

How It Works:

2. CSS Scroll-Snap for Seamless Scrolling

Features:

How to Use:

3. Conic Gradients for Creative Backgrounds

Features:

How to Use:

4. 3D Transformations with Perspective

Features:

How to Use:

5. Complex Shape Animations with CSS Masks

Features of This Code:

How It Works:

How to Use:

6. Glassmorphism with Backdrop Filters

Features of the Code:

How to Use:

7. 8 different animations, showcasing a variety of effects like scaling, rotating, bouncing, fading, and more

Explanation of Animations:

How to Use:

Example:

Part 3:

Part 2:

Part 1:

Wrapping Up

More from Pratik Tamhane

Exploring the Intersection of AR and UI/UX Design

Good UX vs. Bad UX: How I Spot What Works (and What Drives Users Away)

More in Bootcamp

The great interface collapse: why the end of GUI is a relief for designers

The shortest boom in history: why the “AI Era” will end sooner than you think.

I built an alarm app that charges you for snoozing. Apple killed it in one email…

More on UX · UI/UX Design

Vibe Coding is OVER.

The End of Dashboards and Design Systems

【SOP不藏私】系列＃1「連猴子也會的PRD指南」

Decoding Exit and Bounce Rates to Enhance Shopify Stores: a cro.media Insight

Mastering Form Analytics to Elevate Conversion Rates