Light and Dark Mode

The only trick that have some javascript for the button, but the Dark/Light Themes are just CSS.


Typing Effect

Hello World!

Drop Shadow

Image with drop-shadow

Custom Cursor

Emoji Cursor

Truncate Text

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam debitis veritatis voluptatem voluptate dolorem quibusdam sequi exercitationem ad!

Truncate Text to the Specific Number of Lines

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat numquam debitis veritatis voluptatem voluptate dolorem quibusdam sequi exercitationem ad!

Container Queries Overflow

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, aspernatur.

Custom List

  • First Item
  • Second Item
  • Third Item

Custom Color Selection

Custom text selection with ::selection pseudo-element

Disable User Selection

No selection with user-select CSS property

Resize Anything

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis similique explicabo hic nostrum quia quas, libero eos deleniti quo ipsa iste illum alias reiciendis iusto quasi in aliquam accusantium. Dolorem?

CSS Modal

Open Modal

Empty Elements

Hello there!

Custom Scrollbar

custom scrollbar

Sticky

HTML/CSS Tooltip

Hover here to see the tooltip in action

Custom Caret Color

Custom Select CSS Only

Custom Checkbox

Accent Color

::in-range and ::out-range

Toggle Button

Custom Labels

Fancy Text

Background Clipping

Flex Gap

Grayscale Image

Normal Image Grayscale Image

Gradient Border

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Animated Borders

Embed Video Lazy Loading

@Supports

Support to all browsers

Table Responsive

First Name Last Name Profession Dead/Alive Birthplace First Movie Last Movie
Anakin Skywalker Jedi Not Master Dead Tatooine The Phantom Menace Revenge of the Sith
Luke Skywalker Jedi Master Alive Tatooine A New Hope Return of the Jedi
Padme Amidala Politician Dead Naboo The Phantom Menace Revenge of the Sith
Leia Organa General Princess Alive Alderan A New Hope Return of the Jedi

Responsive text with clamp

Hello There!

Focus vs Focus Visible

Inherit Font for button/select/input

Gradient Outline Text

Lorem ipsum dolor sit.

Image Mask

Image With SVG Mask

Different Writing_mode

Lorem ipsum dolor sit amet.

Overscroll Behavior

Lorem, ipsum dolor sit amet consectetur adipisicing elit. In recusandae, doloremque, repellendus corrupti neque illum, similique odit atque expedita omnis optio! Ipsum in ex odit pariatur architecto error placeat saepe facilis repellat itaque, aperiam officia reprehenderit dolor molestias omnis quibusdam totam, cupiditate esse harum! Hic perspiciatis quae dignissimos. Adipisci rem cupiditate magni ipsam sint commodi enim, repudiandae aspernatur, sit sequi delectus. Molestiae ipsum eum facere nostrum magni, officia corrupti perferendis saepe autem iusto doloribus, possimus sint similique, commodi ipsam! Quo praesentium quod esse alias nemo pariatur, eligendi neque possimus voluptatem eius autem saepe explicabo maxime sed illum laboriosam. Quod, illum.
Wah

Individual Transform

Radial Gradients

Blend Mode Image

Constant Shapes

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, nisi?

HTML Modal with Dialog

Open Modal

I'm HTML Modal

HTML only modal with ::backdrop CSS pseudo element and showModal()/close() JS functions

It's possible to use with forms too with method="dialog", when the form is submitted the dialog closes