css-gradients

There are 1 repository under css-gradients topic.

• open-props

  argyleink / open-props

  CSS custom properties to help accelerate adaptive and consistent design.

  csscss-utilitescss-custom-propertiescss-custom-media-queriescss-colorscss-gradientscss-easing-functionscss-normalise
  Language:HTML 5188

• vicmeow / shapy

  Shapy is a CSS gradient editor that lets you size, position and layer CSS gradients on a single div element.

  css-gradientsdesign-toolsdeveloper-toolsgradientvuejs
  Language:Vue 114

• cristicretu / meshgrad

  🎨 Generate CSS Mesh Gradients

  css-gradientsgradientgradient-generatormesh-gradient
  Language:TypeScript 104
• ColorPicker

  Leo-Corporation / ColorPicker

  ColorPicker Max is an app that enables you to pick, create and convert colors, preview text colors, generate color palettes and gradients, and more.

  accessibilityaiai-color-palettecolorcolor-convertercolor-generatorcolorpickercss-gradientsdevdeveloper-toolsdotnetgradientpalettepickerwindows
  Language:C# 98

• gilmoreorless / postcss-gradient-transparency-fix

  PostCSS plugin to fix up CSS gradients with transparency for older browsers

  css-gradientspostcsspostcss-plugin
  Language:JavaScript 26
• Advanced-Color-Picker

  CodingJack / Advanced-Color-Picker

  Harnessing the full power of CSS Gradients

  colorcolor-pickercolor-palettecolorpickergradientgradientscss-gradients
  Language:JavaScript 18

• nikolay-kapustin / CSSGradientToUIKit

  CSS func linear-gradient() to UIKit CGGradientLayer coordinate space conversion

  css-gradientscss-gradientuikit-animationcss-converter
  Language:Swift 12

• Ayokanmi-Adejola / Chat-App-Illustration

  A pixel-perfect chat app interface built with HTML & CSS. Featuring responsive design, gradient backgrounds, realistic chat bubbles, and interactive pricing cards.

  css3html5css-gradientsflexboxgoogle-fonts
  Language:CSS 10

• hongkiat / css3-glossy-effect

  This demo shows how to create a nice glossy effect with a combination of CSS3 gradients.

  css3gradientscss-gradientscss-effects
  Language:CSS 8

• makeuseofcode / CSS-Background-Patterns

  This repository contains code for CSS background patterns.

  csscss-background-animationscss-backgroundscss-gradientsgradient-backgroundhtmlcss-background-patterns
  Language:CSS 6

• kevcap / Apple-project

  My 4th project on Microverse's HTML&CSS Course - Learning about CSS Gradients and Backgrounds

  htmlcsscss-gradientsapple-page
  Language:CSS 5

• nat-davydova / gradient-cards-concept

  Modern gradient cards built with HTML/CSS

  csscss-gradientscss3html
  Language:CSS 3

• 9itish / grad-motion

  JavaScript library for creating, animating, and manipulating CSS gradients and background patterns with ease.

  animated-gradientanimationbackground-patterngradientgradient-animationgradient-backgroundjavascriptjavascript-librarycss-backgroundscss-gradientslinear-gradientsrepeating-gradientsgradient-patternscss
  Language:JavaScript 2

• Roshane-Johnson / salient-styles

  Looking for some color inspiration? Look no further than Salient Styles! Our collection of vibrant and eye-catching gradients is sure to add some cheer to your designs. Check out the website and get your projects noticed!

  angular13css-gradientsgradients
  Language:TypeScript 2

• untallucas / cssoccer-jerseys

  Playing around with CSS gradients and soccer jerseys.

  csscss3css-gradientssoccer
  Language:CSS 2

• AntonV0 / website-design-system

  Project #13 of Codecademy's Full Stack Engineer Career Path

  button-animationbutton-stylecolor-schemecss-gradientscss3design-systemflexfont-pairingshtml5pseudo-classespseudo-elements
  Language:HTML 1

• ArnabKumarRoy02 / css-gradient

  This project is a random CSS gradient generator made using HTML, CSS and JavaScript. This generates new gradients by changing the angle, the colours and the shadow using JS everytime the user clicks the 'Generate' button.

  css-gradientshtml-css-javascript
  Language:CSS 1

• georgewpark / CSS-Gradient-Rounded-Borders

  This project demonstrates a simple method of applying a CSS gradient to a rounded border using background-clip, providing a solution to the problem where border-radius alone won't create rounded corners when a gradient is applied using border-image.

  borderborder-radiuscsscss-gradientsdesignrounded-corners
  Language:CSS 1

• hongkiat / css3-circular-ellipitical-gradient

  With the CSS3 specification, we are now able to create color gradients. Including elliptical and circular form of gradient. This demo show you how to this effect is achieved.

  css3gradientcss-gradients
  Language:HTML 1

• Kellsonphilips / Dropdown-Menu

  Drop down menu with css

  csscss-gradientscss-gridgrid-layouthtmlhtml5menu
  Language:CSS 1

• mrpbennett / vue-calc

  A simple calculator app build in Vue.js with a little help from tailwindcss

  vuejscalculator-applicationcss-gradientstailwindcss
  Language:Vue 1

• petercr / Random-Quote-Machine

  A random quote machine for Free Code Camp intermediate front-end projects

  html5cssbootstrap4css-gradientsfreecodecamp
  Language:JavaScript 1

• Salf1-Sabit / City-Skyline

  The "City Skyline" project is part of the FreeCodeCamp.org Responsive Web Design course. This project serves as a learning focus for implementing CSS variables, responsiveness using percentage/vh/vw values, CSS gradients, and CSS borders to create a visually appealing representation of a city skyline.

  css-bordercss-gradientscss-variablesresponsive-web-design
  Language:CSS 1

• shashankkatte / Not2do-List

  A Minimal (Not)to-do list app using HTML5, CSS3, jQuery and JavaScript

  html5javascriptcss3jquerycss-gradients
  Language:CSS 1

• VannDennOk / fondos_degradados

  Recopilación de fondos degradados para CSS [en construcción!]

  backgroundbackground-colorbackground-gradientscsscss-gradientscss3degradadosespanolgradientsrecopilacionrecopilationspanishfondos-degradados
  Language:HTML 1

• Grymbo / skilled-elearning

  Skilled E-Learnig landing page

  css-flexboxcss-gradientscss-grid
  Language:CSS 0

• karinarogers / registration-form

  This is a front-end registration form created from a TreeHouse mockup image. The form is responsive and utilizes high-level CSS such as transitions, gradients and flexbox.

  htmlformmockupflexboxcss-gradientscss-transitionscss-transformations
  Language:HTML 0

• Kristle22 / grafter-login-project

  Login HW project

  html5css3css-backgroundscss-gradientsiconscss-positionsimagesforms
  Language:HTML 0
• Gradient-Background-Picker

  rembertdesigns / Gradient-Background-Picker

  🔴🟠🟡🟢🔵🟣 Create animated, customizable gradients with pro color tools for web projects—fast export, no build required.

  animated-gradientscolor-harmonycolor-pickerscreative-codingcss-animationcss-gradientsdesign-toolsfrontendgradient-generatorgradientshtml-css-javasciptjavascript-applicationopen-sourceprogressive-web-appresponsive-designuser-interfacevanilla-javascriptweb-design
  Language:JavaScript 0

• Vengat-P / CSS-Day-1

  Css Basic Properties

  css-bordercss-border-radiuscss-box-modelcss-gradientscss3
  Language:CSS 0

• bhavnisharora / galileo-website

  figma design to development

  css-gradientsfigmanextjs
  Language:JavaScript

• fahadm23 / react-login-form

  A login form that handles data using the React.useState hook!

  csscss-gradientshooksreact
  Language:JavaScript

• Pauline-Oraro / BankHub

  A Modern React Landing Page

  css-gradientsreactreact-componentsreact-propstailwindcss
  Language:JavaScript

• QC20 / Shaders-Triangles

  This project showcases an interactive, color-shifting 3D cube using pure CSS. It demonstrates advanced CSS techniques including 3D transforms, custom properties, and animations.

  creative-codingcsscss-3d-animationcss-artcss-onlygenerative-designhtmlinteractive-designshadersux-designvisual-effectsweb-animationfront-end-experimentcss-gradientsdesign-pattersresponsive-designui-componentsweb-graphicsweb-interactivity
  Language:CSS

• StephenMcVicker / single-div-pumpkin

  A pumpkin created with just a sinhle HTML tag and a ton of CSS!

  csscss-animationscss-gradientshtml
  Language:CSS

• webwithaman / portfolio-landing-page

  This is an attractive and responsive portfolio landing page. It is created using HTML, CSS and JS.

  csscss-gradientscss3htmlhtml5landing-pageportfoilo-website
  Language:CSS