snippetcssTip

25 CSS gradients for your next project

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

gradientsprojectyourcssnextfor

Problem

uiGradients has an amazing collection of ready-to-use CSS gradients for pretty much anything. I highly recommend checking out the full collection. Meantime, here are my top picks in case you're looking for some color:
<style>
.gradient-box {
grid-column: 1 / -1;
width: 100%;

Solution

.stripe {
  background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
}

.gradient-box {
grid-column: 1 / -1;
width: 100%;
height: 144px;
border-radius: var(--layout-border-radius) var(--layout-border-radius) 0 0;
margin-top: var(--layout-row-spacing);

Code Snippets

.stripe {
  background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
}

.flare {
  background: linear-gradient(to right, #f12711, #f5af19);
}

.vanusa {
  background: linear-gradient(to right, #da4453, #89216b);
}

Context

From 30-seconds-of-code: 25-css-gradients

Revisions (0)

No revisions yet.