How to Add Custom CSS in Elementor (Free and Pro Methods)

Elementor covers most design needs, but sometimes you want a detail it doesn't offer: a custom hover effect, a gradient border or hiding an element on one screen size. A few lines of custom CSS solve it. Here is where to put them.

Method 1: Per widget (Elementor Pro)

1. Select the widget, container or section.
2. Go to Advanced > Custom CSS.
3. Use the keyword selector to target that element:

selector .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

The CSS only affects that element, so it can't break other pages.

Method 2: Site-wide (Elementor Pro)

Open Site Settings > Custom CSS in the Elementor editor for rules that apply everywhere.

Method 3: Free method with CSS classes

1. Select the element and in Advanced > CSS Classes enter a name such as fancy-card (no dot).
2. Go to Appearance > Customize > Additional CSS and add:

.fancy-card {
  border-radius: 16px;
  border: 2px solid #6366f1;
}

Block themes add CSS under Appearance > Editor > Styles > Additional CSS.

Responsive CSS

@media (max-width: 767px) {
  .fancy-card { padding: 16px; }
}

When CSS doesn't apply

• Regenerate CSS in Elementor > Tools and clear your cache plugin.
• Use the browser's Inspect tool to find the right class.
• Make the selector more specific instead of adding !important everywhere.

Lots of code? A child theme is the tidy place for it.