:::: MENU ::::

How to style HTML form fields using CSS 3 linear-gradient() function?

form_styling_with_css3

CSS 3 provides linear-gradient() function. That creates image using options supplied into that function(). So, we can use this image as background image of any HTML element. Moreover they are faster than gradient image created by image editor. In this tutorial, I’ll show how to make beautiful form fields using CSS 3 gradients.

Styling text field using CSS gradient

Let’s take simple form field

Let’s make inner gradient using CSS. here we’ll style class=”gredient_input”

Output

linear-gradient() function

  • Above function takes several arguments. First argument of this function is side and value could be top, left, to top, to bottom, degree etc
  • Let’s start with simple example.

    Output:-
    simple_gradient
  • You could supply color with opacity options also.
  • You could supply gradient start colors by percentage after color arguments

    In above example gradient end is given at 50% so gradient effect will stop at 50%.

    See Result
    gradient_half

  • Cross browser implementation

Styling HTML form input text box using CSS3 gradient

Styling form buttons using CSS3 gradient

Blue gradient button

Gray Gradient Button

Final Output

Share and Enjoy

  • DZone
  • Google Plus
  • LinkedIn
  • Twitter
  • Facebook
  • Email

So, what do you think ?

  •