Collection of hand-picked free HTML and CSS linear-gradient
code examples from Codepen and other resources.

Links
Made with
- HTML / CSS
About a code
CSS linear-gradient Shadow Left/Right Dynamic
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Border linear-gradient + border-radius
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Skeleton Loading Using Only a Few Lines of CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Animate Linear Gradient
Animate linear-gradient
using CSS variables and JavaScript. I use two CSS gradients for this effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Gradients Collection Preview
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Haml) / CSS
About a code
Linear Gradient Skew CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css
Links
Made with
- HTML / CSS (Stylus)
About a code
Pure CSS Barber's Pole
Pure CSS barber's pole using linear-gradient
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
repeating-linear-gradient background-image
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Linear Gradient Only Sunburst
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Animated text-shadow Pattern
Uses background-clip: text
& linear-gradient
to simulate striped text shadow.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS
About a code
CSS3 Linear Gradient Pattern
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS
About a code
Linear Gradient Columns
Used background: linear-gradient
to create a pattern of columns.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Slim) / CSS
About a code
Single Element Rainbow Colored Apple Logo
CSS linear-gradient
, :before
, :after
pseudo elements and box-shadow
tricks.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -