Gradient

Gradient Gradient

Exempel

  • Orange Fun
  • Velvet Sun
  • Digital Water
  • Lithium
  • Argon
  • Hydrogen
  • Zinc
  • Velvet Sun
  • King Yna
  • Summer
  • Orange Coral
  • Purpink
  • Dull
  • Kimoby Is The New Blue
  • Broken Hearts
  • Clot
  • Shift
  • Subu
  • Socialive
  • Crimson Tide
  • Telegram
  • Terminal
  • Scooter
  • Alive
  • Relay
  • Meridian
  • Compare Now
  • Mello
  • Crystal Clear
  • Visions of Grandeur
  • Chitty Chitty Bang Bang
  • Blue Skies
  • Sunkist
  • Coal
  • Html
  • Cinnamint
  • Maldives
  • Mini
  • Sha la la
  • Purplepine
  • Celestial
  • Learning and Leading
  • Pacific Dream
  • Venice
  • Orca
  • Love and Liberty
  • Very Blue
  • Can You Feel The Love Tonight
  • The Blue Lagoon
  • Under the Lake
  • Honey Dew
  • Roseanna
  • What lies Beyond
  • Rose Colored Lenses
  • EasyMed
  • Cocoaa Ice
  • Jaipur
  • Vice City
  • Mild
  • Dawn
  • Ibiza Sunset
  • Radar
  • 80's Purple
  • Black Rosé
  • Brady Brady Fun Fun
  • Ed's Sunset Gradient
  • Snapchat
  • Cosmic Fusion
  • Nepal
  • Azure Pop
  • Love Couple
  • Disco
  • Limeade
  • Dania
  • 50 Shades of Grey
  • Dusk
  • IIIT Delhi
  • Sun on the Horizon
  • Blood Red
  • Sherbert
  • Firewatch
  • Lush
  • Frost
  • Mauve
  • Royal
  • Minimal Red
  • Dusk
  • Deep Sea Space
  • Grapefruit Sunset
  • Sunset
  • Solid Vault
  • Bright Vault
  • Politics
  • Sweet Morning
  • Sylvia
  • Transfile
  • Tranquil
  • Red Ocean
  • Shahabi
  • Alihossein
  • Ali
  • Purple White
  • Colors Of Sky
  • Decent
  • Deep Space
  • Dark Skies
  • Suzy
  • Superman
  • Nighthawk
  • Forest
  • Miami Dolphins
  • Minnesota Vikings
  • Christmas
  • Joomla
  • Pizelex
  • Haikus
  • Pale Wood
  • Purplin
  • Inbox
  • Blush
  • Back to the Future
  • Poncho
  • Green and Blue
  • Light Orange
  • Netflix
  • Little Leaf
  • Deep Purple
  • Back To Earth
  • Master Card
  • Clear Sky
  • Passion
  • Timber
  • Between Night and Day
  • Sage Persuasion
  • Lizard
  • Piglet
  • Dark Knight
  • Curiosity blue
  • Ukraine
  • Green to dark
  • Fresh Turboscent
  • Koko Caramel
  • Virgin America
  • Portrait
  • Turquoise flow
  • Vine
  • Flickr
  • Instagram
  • Atlas
  • Twitch
  • Pastel Orange at the Sun
  • Endless River
  • Predawn
  • Purple Bliss
  • Talking To Mice Elf
  • Hersheys
  • Crazy Orange I
  • Between The Clouds
  • Metallic Toad
  • Martini
  • Friday
  • ServQuick
  • Behongo
  • SoundCloud
  • Facebook Messenger
  • Shore
  • Cheer Up Emo Kid
  • Amethyst
  • Man of Steel
  • Neon Life
  • Teal Love
  • Red Mist
  • Starfall
  • Dance To Forget
  • Parklife
  • Cherryblossoms
  • Shadow Night
  • Ash
  • Virgin
  • Earthly
  • Dirty Fog
  • The Strain
  • Reef
  • Candy
  • Autumn
  • Winter
  • Forever Lost
  • Almost
  • Moor
  • Aqualicious
  • Misty Meadow
  • Kyoto
  • Sirius Tamed
  • Jonquil
  • Petrichor
  • A Lost Memory
  • Vasily
  • Blurry Beach
  • Namn
  • Day Tripper
  • Pinot Noir
  • Miaka
  • Army
  • Shrimpy
  • Influenza
  • Calm Darya
  • Bourbon
  • Stellar
  • Clouds
  • Moonrise
  • Peach
  • Dracula
  • Mantle
  • Titanium
  • Opa
  • Sea Blizz
  • Midnight City
  • Mystic
  • Shroom Haze
  • Moss
  • Bora Bora
  • Venice Blue
  • Electric Violet
  • Kashmir
  • Steel Gray
  • Mirage
  • Juicy Orange
  • Mojito
  • Cherry
  • Pinky
  • Sea Weed
  • Stripe
  • Purple Paradise
  • Sunrise
  • Aqua Marine
  • Aubergine
  • Bloody Mary
  • Mango Pulp
  • Frozen
  • Rose Water
  • Horizon
  • Monte Carlo
  • Lemon Twist
  • Emerald Water
  • Intuitive Purple
  • Green Beach
  • Sunny Days
  • Playing with Reds
  • Harmonic Energy
  • Cool Brown
  • YouTube
  • Noon to Dusk
  • Hazel
  • Nimvelo
  • Sea Blue
  • Blooker20
  • Sexy Blue
  • Purple Love
  • DIMIGO
  • Sel
Conical gradient, no support in CSS yet

Conic gradient med CSS

conic-gradient(#E53935, #9f1815)

Radial gradient med CSS

-webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#f2efd9 100%);

Horizontal

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,cccccc+50,ffffff+100 */ background: rgb(0,0,0); /* Old browsers */ background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(204,204,204,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

Vertical

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,cccccc+50,ffffff+100 */ background: rgb(0,0,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(204,204,204,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

Diagonal

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,cccccc+50,ffffff+100 */ background: rgb(0,0,0); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(204,204,204,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Diagonal 2

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,cccccc+50,ffffff+100 */ background: rgb(0,0,0); /* Old browsers */ background: -moz-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(204,204,204,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Radial

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,cccccc+50,ffffff+100 */ background: rgb(0,0,0); /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(204,204,204,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Border gradient

border-top: 5px solid rgb(252, 53, 76); background-image: linear-gradient(rgb(252, 53, 76), rgb(10, 191, 188)), linear-gradient(rgb(252, 53, 76), rgb(10, 191, 188)); background-size: 5px 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; border-bottom: 5px solid rgb(10, 191, 188);

Exempel

Externa länkar