17 HTML/ CSS Linear Gradient Examples

Collection of free HTML and CSS Linear Gradiente design examples from Codepen and other resources.

Table of Contents

• Simple CSS Waves | Mobile / Full width
• Responsive Blog Card Slider
• Gradient Buttons with Background-Color Change (CSS-only)
• Animated Weather Cards
• React Color Gradients
• Linear gradient columns
• CSS3 linear gradient pattern
• [webkit] Animated "text-shadow" pattern
• Linear gradient only sunburst
• repeating-linear-gradient background-image
• Pure CSS Barber's pole 💈
• Linear Gradient Skew CSS
• Gradients Collection Preview
• Animate linear gradient
• Skeleton loading using only a few lines of CSS
• Border linear-gradient + border-radius
• CSS - linear-gradient shadow left / right "dynamic"

Simple CSS Waves | Mobile Full width

See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz ( @goodkatz) on CodePen.

Responsive Blog Card Slider

See the Pen Responsive Blog Card Slider by Muhammed Erdem ( @JavaScriptJunkie) on CodePen.

Gradient Buttons with Background-Color Change (CSS-only)

See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera ( @pirrera) on CodePen.

Animated Weather Cards

See the Pen Animated Weather Cards by Steve Gardner ( @ste-vg) on CodePen.

React Color Gradients

See the Pen React Color Gradients by Marco Biedermann ( @marcobiedermann) on CodePen.

Linear gradient columns

See the Pen Linear gradient columns by Chris Nager ( @chrisnager) on CodePen.

CSS3 linear gradient pattern

See the Pen CSS3 linear gradient pattern by Jerome A ( @jerome_a_) on CodePen.

[webkit] Animated "text-shadow" pattern

See the Pen [webkit] Animated "text-shadow" pattern by carpe numidium ( @carpenumidium) on CodePen.

Linear gradient only sunburst

See the Pen Linear gradient only sunburst by Ben Edwards ( @benedfit) on CodePen.

repeating-linear-gradient background-image

See the Pen repeating-linear-gradient background-image by Zed Dash ( @z-) on CodePen.

Pure CSS Barber's pole 💈

See the Pen Pure CSS Barber's pole 💈 by yumeeeei ( @yumeeeei) on CodePen.

Linear Gradient Skew CSS

See the Pen Linear Gradient Skew CSS by Bryan ( @billyBOB88) on CodePen.

Gradients Collection Preview

See the Pen Gradients Collection Preview by MenSeb ( @MenSeb) on CodePen.

Animate linear gradient

See the Pen Animate linear gradient by isladjan ( @isladjan) on CodePen.

Skeleton loading using only a few lines of CSS

See the Pen Skeleton loading using only a few lines of CSS by Håvard Brynjulfsen ( @havardob) on CodePen.

Border linear-gradient + border-radius

See the Pen Border linear-gradient + border-radius by Chicagez ( @chicagez) on CodePen.

CSS - linear-gradient shadow left / right "dynamic"

See the Pen CSS - linear-gradient shadow left / right "dynamic" by Elly Pirelly ( @ellypirelly) on CodePen.