Ready-made CSS gradients
Hand-picked gradients for real interfaces. Open one and take the CSS.
Hero · Mesh
background:
radial-gradient(circle at 18% 18%, #9df6ff 0, transparent 35%),
radial-gradient(circle at 82% 12%, #c3a6ff 0, transparent 38%),
radial-gradient(circle at 62% 88%, #ff9dc7 0, transparent 42%),
#3f56d9;Card · Dark
background:
radial-gradient(circle at 20% 100%, #ff5d3a 0, transparent 38%),
radial-gradient(circle at 90% 10%, #7f3cff 0, transparent 35%),
#15131a;Background · Soft
background: linear-gradient(
135deg,
#f8f3ff 0%,
#e9f7ff 48%,
#fff6e7 100%
);Button · Bright
background: linear-gradient(
110deg,
#d9ff43 0%,
#70f6a8 48%,
#44d7ff 100%
);Hero · Dark
background:
radial-gradient(circle at 72% 20%, #244bd6 0, transparent 35%),
radial-gradient(circle at 10% 85%, #702da8 0, transparent 42%),
#080b18;Text · Bright
background: linear-gradient(90deg, #ff4d8d, #7a5cff, #00a8c5);
background-clip: text;
color: transparent;Card · Warm
background:
radial-gradient(circle at 12% 12%, #fff5bf 0, transparent 42%),
radial-gradient(circle at 88% 80%, #ff9fa8 0, transparent 46%),
#ffcfae;Border · Bright
.frame {
padding: 2px;
background: linear-gradient(120deg, #ff62b3, #7c68ff, #42d6e8);
}
.frame > div { background: #fff; }Background · Fresh
background: linear-gradient(
145deg,
#dfffe7 0%,
#aeeed7 45%,
#8dd9e8 100%
);