Illustrations

CSS Gradient
SMART LAYOUTS Menu

0 35 100

COLOR CODE

#000000 0 0 0 100

HEX R G B A

HEX STOP ⊕

#4c1a77 0 ×
#090979 35 ×
#000000 100 ×

Linear Radial 90°

CSS Max Compatibility (IE6+)

background: rgb(76,26,119);
background: linear-gradient(90deg,
rgba(76,26,119,1) 0%,
rgba(9,9,121,1) 35%, rgba(0,0,0,1)
100%);

Copy to Clipboard

POWERED BY DESIGNSTRIPE

ABOUT THIS TOOL

CSS Gradient
CSS Gradient is a designstripe
project that lets you create free
gradient backgrounds for your
website. Besides being a css gradient
generator, the site is also chock-full
of colorful content about gradients
from technical articles to real life
gradient examples like Stripe and
Instagram.

Why we made this?

See gradients were super played out
back in the early web days, but now
they’re so ubiquitous that you’d be
remiss not to drop them in your site,
interface, or next hair dye job.

Also, I'm part of a group of makers

with a mission to build a better
internet, one digital project at a time.
One of our recent project launches is
Cool Backgrounds another free
design tool to generate background
wallpaper for websites, blogs and
phones.

16
ILLUSTRATION
TRENDS
2023

16 Inspiring Illustration
Trends To Try In 2023

ARTICLE

12 Tips To Optimize
Your Landing Pages

ARTICLE

Introduction To The
Usage Of AI To Enhance
Images And Videos

ARTICLE

15 Places To Get
Unique Design
Inspiration

ARTICLE

Color Shades
What's the foundation for beautiful
gradients? Gorgeous shades of color,
of course! Our color shades pages
curate a selection of popular colors,
whether you're looking for that
wonderful soft baby blue or hyper
lime green, check out the shades
pages.

Shades of Blue

Shades of Red

Shades of Green

Swatches
Don’t have enough time to make your
own gradients? Looking for a supply
of popular gradients you can use for
your projects? Our swatch collection
features a curated selection of
gorgeous gradients and color
combinations free for you to use
however you’d like. Each swatch
comes with the basic code you’ll
need to implement it on your own
website.

Browse the gallery

Examples
If you need a little inspiration before
getting started on your own, our
gradient examples page is the best
place to go. Sometimes all you need
is a little push—a source to
jumpstart your creativity, and a
couple gradient examples could do
just that for you. From Stripe to
Scale API, browse the examples to
give you that jumpstart you need to
start making fresh gradients on your
own.

Get inspired

Blog
Interested in learing how to use
blended colors? Our blog exposes
the details of everything gradients
and even has some in-depth
references for you to look at as you
learn how to code these elements
yourself. Browse through our
references, tutorials, and articles for
more information all about gradients.

Learn new tricks

Resources
Is the basic information not enough
for you? Want to learn more about
the inner-workings of gradients and
everything to do with them? We’ve
gathered some killer resources to
help you become a gradient expert,
and they’re all available for you here
on our resources page. If you’re the
kind of person who is always seeking
more knowledge, this is the page for
you.

Dive deep into gradients

What is a gradient?

Gradients are CSS elements of the

image data type that show a
transition between two or more
colors. These transitions are shown
as either linear or radial. Because
they are of the image data type,
gradients can be used anywhere an
image might be. The most popular
use for gradients would be in a
background element.

To put it more relevantly, gradients

are part of an extremely popular
design trend that has been gaining
popularity over the last several years.
It seems that they have always been
around in the background (no pun
intended); although, some sources
claim that the trend is “coming
back”. Of course, it’s hard for
something to come back if it never
left, but we’ll chalk that up to
semantics.

Gradients allow you—the designer—

to explore new opportunities to
provide fresh, clean designs for your
audience. The added transition
between colors allows you to play
with two-dimensional and seemingly
three-dimensional aspects, taking
your designs from boring to
extraordinary with some simple
code.

In fact, the best thing about gradient

code is that it can be as simple or as
complex as you’d like to make it. You
can do the bare minimum and let
the browser figure out the rest, or
you can take things into your own
hands and identify all the odds and
ends. You could even do a little extra
if you wanted and explore the
endless possibilities of gradients.

Linear Gradients

Transitions in linear gradients occur

along a straight line determined by
an angle or direction. A CSS linear
gradient can be coded by using the
linear-gradient() function and can be
as simple or complex as you would
like. At the very least, you’ll only
need two colors to get started. From
there, you could add more colors,
angles, directions, and more to
customize your gradient even further.

CODE

background-image: linear-
gradient(90deg, #020024 0%,
#090979 35%, #00d4ff 100%);

R E S U LT

If you leave the code at its most

basic styling, the other elements will
be determined automatically by the
browser. This includes the direction
or angle and color-stop positions. For
more customized styling, you can
specify these values to create fun
gradients with multiple colors or
angled directions. Playing with color-
stop positions could also leave you
with a solid pattern instead of a
traditional gradient. The possibilities
are endless!

Compared to radial gradients, linear

gradients are certainly more popular
in design and branding techniques.
For example, you may have noticed
the popular music-streaming
company, Spotify, and their gradient
branding recently. Linear gradients
are, perhaps, the easiest way to
incorporate this trend into your
creations, as they seem to blend
smoothly with other design
elements.

Radial Gradients

A CSS radial gradient—although far

less often seen—is just as beautiful
and fun as a linear gradient and can
be implemented just as easily. With
that said, the code may seem more
di!cult to figure out at first. It is for
this reason that, for some designers,
it may be easier to start out with a
linear gradient.

CODE

background-image: radial-
gradient(circle, #5c0067 0%,
#00d4ff 100%);

R E S U LT

Of course, the code isn’t actually all

that complicated at all. In fact, most
of the code is exactly the same as
that of the linear gradient—with just
a few tweaks for extra radial
customization. For example, unlike
with linear gradients, you can
actually adjust the size of radial
gradients in place of where the
direction would normally go. Playing
with the di"erent values that
determine these sizes can give you a
lot of di"erent results.

While radial gradients may not be as

popular as their linear counterparts,
it’s possible that you might have
seen them more often than you
think. Special CSS techniques can
leave you with designs that may be
unrecognizable when it comes to the
typical idea of what a linear or radial
gradient may look like. In the end,
radial gradients are just as powerful
to use and can give your designs an
extra kick of something special.

CSS Gradient Text

TUTORIAL

ARTICLE

16 Super Fire
CSS Gradient
Examples

Radial Gradient CSS

REFERENCE

Repeating Linear Gradient