CSS, çeşitli web belgelerine stil eklemenin yoludur. CSS arka plan gradyanı kullanarak, çekici bir web sayfası oluşturmaya yardımcı olabilecek görsel stil çeşitleri oluşturabiliriz.
CSS Gradyanları (CSS Gradients), web siteleri için degrade bir arka plan oluşturmanıza olanak tanıyan ücretsiz bir araçtır. Degradeler, bir rengin diğerine dönüştüğü ve yeni bir renk tonu oluşturduğu anlamına gelir.
CSS Gradyanları (CSS gradient), iki veya daha fazla belirtilen renk arasında yumuşak geçişler görüntülemenize olanak tanır.
Gradyanlar 3 türe ayrılabilir:
- Doğrusal Gradyan (Linear Gradient):
- Radyal Gradyan (Radial Gradient)
- Konik Gradyan (Conic Gradient)
Doğrusal Gradyan, Yukarı, aşağı, sola, sağa ve çapraz olarak yumuşak renk geçişlerini içerir. Radyal Gradyan doğrusal bir degradeden farklıdır, tek bir noktadan başlar ve dışa doğru yayılır. Konik Gradyan ise renk geçişlerinin bir merkez noktası etrafında döndürüldüğü bir gradyandır.
Renk geçişleri için genelde büyük boyutlarda JPG ve PNG dosyaları kullanılır. Bu da web sayfanızın aşırı yavaşlamasına sebep olabilir. CSS Gradient sayesinde oluşturacağımız renk geçişleri performans açısından ve görsel olarak iyi iş çıkartabilmektedir.
Yalnızca tek bir CSS kodu satırıyla web sitenize güzel, göz alıcı bir CSS arka plan gradyanı ekleyebilirsiniz:
En Şık 30 CSS Arka Plan Gradyan Örneği
CSS arka plan Gradyanlarını, web sayfanızın arka plan, kenarlıklar, simgeler, düğmeler, metin, alt çizgi, liste madde işaretleri vb. gibi çeşitli öğeleriyle birlikte kullanabilirsiniz. Sitenizin tasarımını yeni zirvelere taşıyın.
Dusty Grass
CSS arka plan Gradyanını oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);Sand to Blue
Bu CSS arka plan Gradyanını oluşturmak için aşağıdaki CSS’yi kullanın:
background-image: linear-gradient(to right, #DECBA4, #3E5151);Kye Meh
Yukarıdaki doğrusal CSS arka plan Gradyanını oluşturmak için aşağıdaki CSS kodunu kullanın:
background-image: linear-gradient(to right, #8360c3, #2ebf91);Amin
background-image: linear-gradient(to right, #8e2de2, #4a00e0);Relaxing Red
background-image: linear-gradient(to right, #fffbd5, #b20a2c);Sublime Light
background-image: linear-gradient(to right, #fc5c7d, #6a82fb);Megatron
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);Blue Raspberry
background-image: linear-gradient(to right, #00b4db, #0083b0);
background-image: linear-gradient(to right, #434343 0%, black 100%);Crystalline
background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);Lawrencium
background-image: linear-gradient(to right, #0f0c29, #302b63, #24243e);Ohhappiness
background-image: linear-gradient(to right, #00b09b, #96c93d);The Strain
background-image: linear-gradient(to right, #870000, #190a05);Yellow Mango
background-image: radial-gradient(circle farthest-side, #fceabb, #f8b500);Juicy Grass
background-image: radial-gradient( circle 759px at -6.7% 50%, rgba(80,131,73,1) 0%, rgba(140,209,131,1) 26.2%, rgba(178,231,170,1) 50.6%, rgba(144,213,135,1) 74.1%, rgba(75,118,69,1) 100.3% );Pink Fish
background-image: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));Sea Lord
background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );Cherry Blossom
background-image: linear-gradient(25deg,#d64c7f,#ee4758 50%);Fresh Air
background-image: linear-gradient( 95.2deg, rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64% );Stellar
background-image: radial-gradient( circle farthest-corner at 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100.2% );Noon to Dusk
background-image: linear-gradient(to right, #ff6e7f, #bfe9ff);Sunrise
background-image: linear-gradient(to right, #ff512f, #f09819);Forest
background-image: linear-gradient(to right, #5a3f37, #2c7744);Superman
background-image: linear-gradient(to right, #0099f7, #f11712);Deep-Sea Space
background-image: linear-gradient(to right, #2c3e50, #4ca1af);Royal
background-image: linear-gradient(to right, #141e30, #243b55);Orange Coral
background-image: linear-gradient(to right, #ff9966, #ff5e62);Old Wine
background-image: linear-gradient(to right, #33001b, #ff0084); Morning Sky
background-image: linear-gradient(to right, #b6fbff, #83a4d4);Caramel
background-image: linear-gradient(to right, #FFD194, #D1913C);Degradeleri, web sayfanızın arka plan, kenarlıklar, simgeler, düğmeler, metin, alt çizgi, liste madde işaretleri vb. gibi çeşitli öğeleriyle birlikte kullanabilirsiniz.