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

Demo image: CSS linear-gradient Shadow Left/Right Dynamic

Author

  • Elly Pirelly

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: -

Demo image: Border linear-gradient + border-radius

Author

  • Chicagez

Links

Made with

  • HTML / CSS

About a code

Border linear-gradient + border-radius

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Håvard Brynjulfsen

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: -

Author

  • isladjan

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: -

Demo image: Gradients Collection Preview

Author

  • MenSeb

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Gradients Collection Preview

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Linear Gradient Skew CSS

Author

  • Bryan

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

Author

  • yumeeeei

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: -

Demo image: repeating-linear-gradient background-image

Author

  • Zed Dash

Links

Made with

  • HTML / CSS (SCSS)

About a code

repeating-linear-gradient background-image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Linear Gradient Only Sunburst

Author

  • Ben Edwards

Links

Made with

  • HTML / CSS (SCSS)

About a code

Linear Gradient Only Sunburst

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • carpe numidium

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: -

Demo image: CSS3 Linear Gradient Pattern

Author

  • Jerome A

Links

Made with

  • HTML / CSS

About a code

CSS3 Linear Gradient Pattern

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Linear Gradient Columns

Author

  • Chris Nager

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: -

Demo image: Single Element Rainbow Colored Apple Logo

Author

  • Avaz Bokiev

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: -