# Custom CSS recipes for Gutenslider

URL: https://gutenslider.org/custom-css-wordpress-slider/
Published: 2021-05-18
Updated: 2026-10-07

> Scoped CSS for common requests: dim the neighbouring slides, round the corners, style captions and set a default divider color.

Most looks are a setting away. For the rest there is CSS. These recipes answer common requests; change the values to taste. (Updated for Gutenslider 7.0.)

### Where to put the CSS

In a block theme: **Appearance → Editor → Styles → Additional CSS**. In a classic theme: ** Appearance → Customize → Additional CSS**. Or in your child theme’s stylesheet.

Always start selectors with `.wp-block-eedee-block-gutenslider`, so the CSS only reaches sliders. To style one slider only, use its ID instead (Advanced panel → Slider ID), for example `#gutenslider-dr8rqxqt1`.

### Fade out the previous and next slides

For carousels with several slides per view:

```
.wp-block-eedee-block-gutenslider .swiper-slide {
	transition: opacity 0.6s;
}
.wp-block-eedee-block-gutenslider .swiper-slide-prev,
.wp-block-eedee-block-gutenslider .swiper-slide-next {
	opacity: 0.3;
}
```

### Rounded corners

Works best with space between the slides (a Pro setting):

```
.wp-block-eedee-block-gutenslider .swiper-slide {
	border-radius: 20px;
	overflow: hidden;
}
```

### A box behind the slide content

```
.wp-block-eedee-block-gutenslider .slide-content {
	background: rgb(0 0 0 / 55%);
	color: #fff;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	max-width: 32rem;
}
```

### A default color for shape dividers

Dividers should match the page background. Set it once instead of per slider; a color set in the block still wins:

```
.gutenslider-divider-top,
.gutenslider-divider-bottom {
	color: #ffffff;
}
```

### More

The class names are listed in the [developer notes](https://gutenslider.org/docs/developers/#markup). They stay the same across versions, so recipes written for 6.x keep working in 7.0.