75+ Beautiful CSS Input Examples
Curated collection of beautiful text input styles for your next project.
Try out each input, then click "Copy CSS" to copy the styles.
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
#11
#12
#13
#14
#15
#16
#17
#18
#19
#20
#21
#22
#23
#24
#25
#26
#27
#28
#29
#30
#31
#32
#33
#34
#35
#36
#37
#38
#39
#40
#41
#42
#43
#44
#45
#46
#47
#48
#49
#50
#51
#52
#53
#54
#55
#56
#57
#58
#59
#60
#61
#62
#63
#64
#65
#66
#67
#68
#69
#70
#71
#72
#73
#74
#75
#76
#77
#78
#79
Explore more input styles
More CSS Example Collections
Box Shadow Examples
120+ curated box-shadow styles
Button Examples
65+ CSS button designs
Checkbox Examples
50+ custom checkbox designs
Radio Examples
40+ radio button styles
Select Examples
85+ dropdown select styles
Toggle Examples
Toggle switch designs
Card Examples
Card layout styles
Spinner Examples
Loading spinner animations
Progress Bar Examples
Progress bar designs
Badge Examples
Badge and label styles
Tooltip Examples
Tooltip popup styles
Tab Examples
Tab navigation designs
Avatar Examples
User avatar styles
Navbar Examples
Navigation bar designs
Breadcrumb Examples
Breadcrumb navigation styles
Link Examples
Animated link hover effects
Textarea Examples
Text area field styles
Stepper Examples
Step indicator designs
Range Slider Examples
Custom range input styles
Skeleton Examples
Loading skeleton designs
Rating Examples
Star rating components
List Examples
Styled list designs
Gradient Collection
Curated CSS gradients