CSS Scrollbar Generator
With this generator, you will be able to change the appearance and colors for scrollbars on your website. Very easy to use, just change the selections below and you will visually see the change in the the example area. All the CSS code will be automatically generated, so that you can paste it into your project. Note: We need to use the vendor prefix -webkit- for the scrollbars to work in Chrome, Edge and Safari. Firesfox use different properties that are limited at the moment.
Trackbar
Active Color: 0px
Thumb
Active Color: 0pxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
Sidebar
CSS & HTML References
- CSS At-Rules
- CSS Data Types
- CSS Functions
- attr
- blur
- brightness
- calc
- circle
- contrast
- drop-shadow
- ellipse
- grayscale
- hsl
- hsla
- hue-rotate
- inset
- invert
- linear-gradient
- matrix
- matrix3d
- opacity
- perspective
- polygon
- radial-gradient
- repeating-linear-gradient
- repeating-radial-gradient
- rgb
- rgba
- rotate
- rotate3d
- rotateX
- rotateY
- rotateZ
- saturate
- scale
- scale3d
- scaleX
- scaleY
- scaleZ
- sepia
- skew
- skewX
- skewY
- translate
- translate3d
- translateX
- translateY
- translateZ
- CSS Properties
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip-path
- color
- column-count
- column-fill
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- counter-set
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphens
- image-orientation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-break
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- position
- quotes
- resize
- right
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- table-layout
- text-align
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- CSS Pseudo Elements
- HTML Tags
- a
- abbr
- address
- area
- article
- aside
- audio
- b
- base
- bdi
- bdo
- blockquote
- body
- br
- button
- canvas
- caption
- cite
- code
- col
- colgroup
- comment
- datalist
- dd
- del
- details
- dfn
- dialog
- div
- dl
- doctype
- dt
- em
- embed
- fieldset
- figcaption
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- head
- header
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- keygen
- label
- legend
- li
- link
- map
- mark
- menu
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- progress
- q
- rp
- rt
- ruby
- s
- samp
- script
- section
- select
- small
- source
- span
- strong
- style
- sub
- summary
- sup
- table
- tbody
- td
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- u
- ul
- var
- video
- wbr
Wordpress hosting. Theme and plugin reviews. Wordpress development tips. Templatic
Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips. A2 Web Hosting
Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting. Online Password Manager
Access your passwords from any computer, no need to remember all of your passwords. Advertise Here
Advertise your company and products here!