12+ CSS Beautiful Sliders

April 27, 2025

We have collected some of the new and popular CSS Beautiful Sliders from codepen and other popular resources. You can use these free ready code to further enhance your website's Hero section.

Auto Slider

Automatic overlay transition slider.

Preview

Codepen Code

Author: Andrey

Published: April 14, 2025

Made With: HTML, CSS

Pure CSS Slider with Nav

Navbar Slider with pure css.

Preview

Codepen Code

Author: Irina Kats

Published: March 16, 2025

Made With: HTML, CSS, JS

CSS Slider (input radio) dots and arrows controls

CSS big image slider.

Preview

Codepen Code

Author: Gennady

Published: March 14, 2025

Made With: HTML, CSS

Smooth 3d perspective slider

Responsive (sort of?). Uses this technique for smooth transitions on mouse move.

Preview

Codepen Code

Author: Alex Nozdriukhin

Published: August 17, 2017

Made With: HTML, CSS, JS(Babel)

Responsive Faux 3D Content Scroller

3D Content Scroller

Preview

Codepen Code

Author: Jhey

Published: July 28, 2022

Made With: HTML, CSS (SCSS)

Pure CSS Slideshow

Using CSS only, I created a slideshow that uses pseudo classes to achieve the next and previous functionality.

Preview

Codepen Code

Author: Charanjit Chana

Published: April 23, 2020

Made With: HTML, CSS (SCSS)

Yarden (Design By Olya Marchak)

Responsive slider for Hero section.

Preview

Codepen Code

Author: semicorpus

Published: November 22, 2018

Made With: HTML, CSS

CSS Challenge

Css Only Slide Gallery

Preview

Codepen Code

Author: S.Gord

Published: March 29, 2018

Made With: HTML, CSS

Motion blur effect using SVG filters

This is an experiment that simulates a motion blur effect every time a slide is switched.

Preview

Codepen Code

Author: Damián Muti

Published: July 26, 2017

Made With: HTML, CSS (SCSS), JS

CSS Only: Carousel/Slider with proper sliding between Slides

In this one I'm using CSS selectors and little hack/tricks to archive proper sliding effect between slides.

Preview

Codepen Code

Author: JFarrow

Published: August 3, 2023

Made With: HTML, CSS

Linear slider with SplitText effect | Greensock

This image appears to be part of a slider or carousel, featuring a gradient background and navigation arrows.

Preview

Codepen Code

Author: Arden

Published: December 5, 2015

Made With: HTML, CSS (SCSS), JS

Slider UI

Bold text on a dark background slider.

Preview

Codepen Code

Author: Mergim Ujkani

Published: June 6, 2017

Made With: HTML, CSS (Stylus), JS

Fullscreen drag-slider with parallax

Sort of responsive. Tested in Chrome/FF/last IE, everywhere looks fine.

Preview

Codepen Code

Author: Nikolay Talanov

Published: March 19, 2015

Made With: HTML, CSS (SCSS), JS