How To Create SAAS, Software Landing Page By Using Elementor Free | WordPress 2025

7.8KSHARES

Hide horizontal overflow for the entire page CSS

Hero Banner Style CSS

.hero-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background-image: url('https://kitpapa.net/appnetic/wp-content/uploads/2025/06/Mask-group-1.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  z-index: 1;
  pointer-events: none;
}

Hero Banner Style CSS Class

hero-wrapper

Hero Banner Title Style CSS

.hero-what-new-wrapper {
background: #4300EE;
box-shadow: inset 1px 1px 6px 2px rgba(255, 255, 255, 0.1), inset -1px -1px 6px 2px rgba(255, 255, 255, 0.1);
border-radius: 100px;
}  

.hero-connected-button .elementor-button-icon {
    font-size: 16px;
}

.hero-connected-button .elementor-button-icon svg {
    fill: none !important;
}

Hero Banner Title Style CSS Classes

hero-what-new-wrapper
hero-connected-button

Button Shadow Style CSS

.button-shadow .elementor-button {
    background: #4300EE;
    box-shadow: 
        0 0 0px 0px rgba(67, 0, 238, 0),
        inset -2px -2px 12px 2px rgba(255, 255, 255, 0.16), 
        inset 2px 2px 10px 2px rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);
    position: relative;
    z-index: 1;
}

.button-shadow .elementor-button:hover {
    transform: scale(1.05);
    box-shadow: 
        0 0 20px rgba(67, 0, 238, 0.8),
        0 0 40px rgba(67, 0, 238, 0.6),
        inset -2px -2px 12px 2px rgba(255, 255, 255, 0.16),
        inset 2px 2px 10px 2px rgba(255, 255, 255, 0.16);
}

.button-shadow .elementor-button-icon {
    font-size: 20px;
}

.button-shadow .elementor-button-icon svg {
    fill: none !important;
}

Button Shadow Style CSS Class

button-shadow

Product Item BG Style CSS

.product-item-bg {
      background: 
    linear-gradient(142.02deg, rgba(0, 16, 255, 0) 1.07%, rgba(242, 0, 255, 0.1) 97.45%),
    linear-gradient(142.02deg, rgba(0, 16, 255, 0.1) 1.07%, rgba(242, 0, 255, 0.1) 97.45%);
  
  -webkit-backdrop-filter: blur(20.7357px);
  backdrop-filter: blur(20.7357px);
}

Product Item BG Style CSS Class

product-item-bg

Gradient Border Style CSS

.gradient-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: radial-gradient(circle at center, #4550F1 0%, rgba(55, 37, 49, 0) 80%) !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}

.gradient-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: radial-gradient(circle at center, #4550F1 0%, rgba(55, 37, 49, 0) 80%) !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}

Gradient Border Style CSS Class

gradient-border

Slider Style CSS

.slider-item {
      background: linear-gradient(142.02deg, rgba(61, 35, 178, 0.1) 1.07%, rgba(242, 0, 255, 0.1) 97.45%);
  backdrop-filter: blur(20.7357px);
  -webkit-backdrop-filter: blur(20.7357px);
  border-radius: 20px;
}


.parent-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider-track-left, .slider-track-right {
  display: flex;
  width: max-content;
}

.slider-track-left {
  animation: slideLeft 40s linear infinite;
}

.slider-track-right {
  animation: slideRight 40s linear infinite;
}

.slider-track-left:hover,
.slider-track-right:hover {
  animation-play-state: paused;
}

@keyframes slideLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% / 2));
  }
}

@keyframes slideRight {
  0% {
    transform: translateX(calc(-100% / 2));
  }
  100% {
    transform: translateX(0);
  }
}



.slider-content {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.parent-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(270deg, #030116 0%, rgba(3, 1, 22, 0) 30%, rgba(3, 1, 22, 0) 70%, #030116 100%);
  pointer-events: none;
  z-index: 2; 
}

Slider Style CSS Class

parent-container
slider-item
slider-track-left
slider-track-right
slider-content

Logos Area Style CSS

.logo-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #030116 0%, rgba(3, 1, 22, 0) 30%, rgba(3, 1, 22, 0) 70%, #030116 100%);
  pointer-events: none;
  z-index: 2;
}

Logos Area Style CSS Class

logo-section

Pricing Switch HTML & CSS

Pricing Table Toggle JS

Pricing Table Toggle Style CSS

Pricing Table Toggle Style CSS Classes

monthly-plan
annual-plan

Pricing Table List Item Style CSS

.pricing-section {
    background: #020219;
box-shadow: 0px -45px 85px rgba(1, 13, 182, 0.55), 0px 45px 85px rgba(1, 13, 182, 0.55);
border-radius: 12px;
}

.price-icon-list .elementor-icon-list-item {
    display: flex;
    padding: 5px 6px 5px 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 100px;
    margin-bottom: 8px;
}

.price-list-opacity {
    opacity: 0.2;
}

Pricing Table List Item Style CSS Classes

pricing-section
price-icon-list
price-list-opacity

Main Menu Style CSS

Main Menu Style CSS Classes

menu-section
main-menu