cssgradient.io Open in urlscan Pro
13.32.121.120  Public Scan

Form analysis
0 forms found in the DOM

Text Content

WE VALUE YOUR PRIVACY

We and our partners store and/or access information on a device, such as cookies
and process personal data, such as unique identifiers and standard information
sent by a device for personalised ads and content, ad and content measurement,
and audience insights, as well as to develop and improve products.
With your permission we and our partners may use precise geolocation data and
identification through device scanning. You may click to consent to our and our
partners’ processing as described above. Alternatively you may access more
detailed information and change your preferences before consenting or to refuse
consenting.
Please note that some processing of your personal data may not require your
consent, but you have a right to object to such processing. Your preferences
will apply to this website only. You can change your preferences at any time by
returning to this site or visit our privacy policy.
MORE OPTIONSAGREE
CSS Gradient
 * Color Shades New
 * Backgrounds
 * Swatches
 * Blog

Menu
 * Home
 * Backgrounds
 * Swatches
 * Blog
 * Resources



Color Code
hex
r
g
b
a




HEX


STOP


⊕

×
×
×
Linear Radial

Upload Image


1
2
3
4
5
6

CSS
Max Compatibility (IE6+)

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%,
rgba(0,212,255,1) 100%);

Copy to Clipboard


ABOUT THIS TOOL


CSS GRADIENT

CSS Gradient is a happy little website and free tool that lets you create a
gradient background for websites. 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 DID YOU MAKE 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.




LINEAR GRADIENT CSS

REFERENCE


CSS GRADIENT TEXT

TUTORIAL


16 SUPER FIRE CSS GRADIENT EXAMPLES

ARTICLE


RADIAL GRADIENT CSS

REFERENCE


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%);

RESULT



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 difficult 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%);

RESULT



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 different values that
determine these sizes can give you a lot of different 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.




REPEATING LINEAR GRADIENT CSS

REFERENCE


HOW TO CREATE A GRADIENT IN PHOTOSHOP

TUTORIAL


HOW TO CREATE A GRADIENT BACKGROUND

TUTORIAL


YOU CRAZY? PATTERNS WITH CSS GRADIENTS

ARTICLE


CSS Gradient
© 2017 - 2022 Privacy policy Manage cookies

SHARING

 * 
 * 
 * 

PAGE

 * Blog
 * Color Shades
 * Swatches
 * Resources

NETWORK

 * Linux Man Pages
 * Cool Backgrounds
 * Unlimited Graphic Design

LINKS

 * Sitemap
 * Credit